TailwindTemplates

Recently added

Biings alert

Copied!

                    
                         <div class="px-6 py-4 text-gray-700">
  Default message
</div>

<div class="px-6 py-4 bg-blue-50 rounded-lg text-blue-500">
  A regular <span class="font-bold">info</span> message
</div>

<div class="px-6 py-4 bg-yellow-50 rounded-lg text-yellow-600">
  A <span class="font-bold">warning</span> message
</div>

<div class="px-6 py-4 bg-green-50 rounded-lg text-green-500">
  A <span class="font-bold">success</span> message
</div>

<div class="px-6 py-4 bg-gray-100 rounded-lg text-gray-700">
  A <span class="font-bold">dark</span> message
</div>
                    
                

Biings Cards

Copied!

                    
                         <div
    class="p-8 text-gray-500 bg-white border border-gray-100 rounded-2xl font-medium"
  >
    <p>Bordered</p>
  </div>

  <div class="p-8 text-gray-500 bg-gray-100  rounded-2xl font-medium">
    <p>Well</p>
  </div>

  <div class="p-8 text-gray-500 bg-white  rounded-2xl font-medium">
    <p>White</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-sm border border-gray-100  rounded-2xl font-medium"
  >
    <p>Raised</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-lg border border-gray-100  rounded-2xl font-medium"
  >
    <p>Floating</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-xl border border-gray-100 rounded-2xl font-medium"
  >
    <p>Popping</p>
  </div>
                    
                

Biings buttons

Copied!

                    
                         <button
    class="bg-white py-2 px-4 rounded-lg border border-gray-200 hover:border-gray-300 text-purple-900 shadow-md font-medium transition-colors"
  >
    Default
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-purple-700 hover:bg-purple-600 shadow-md font-medium  transition-colors"
  >
    Primary
  </button>

  <button
    class="text-purple-900 py-2 px-4 rounded-lg hover:bg-gray-100 font-medium transition-colors"
  >
    Text
  </button>

  <button
    class="text-purple-900 py-2 px-4 rounded-lg hover:underline font-medium transition-colors"
  >
    Ghost
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-purple-900 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Dark
  </button>

  <button
    class="text-purple-700 py-2 px-4 rounded-lg bg-purple-100 hover:bg-purple-200 font-medium transition-colors"
  >
    Light
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-green-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Success
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-blue-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Info
  </button>

  <button
    class="text-black py-2 px-4 rounded-lg bg-yellow-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Info
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-red-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Danger
  </button>