Tailwind Widgets

I am intensively using tailwind css for my frontend projects recently. Here I am recording a bunch of widgets that I created in my projects and thought will be refered to in the furture.

Tooltip

tooltip

  • The main part is just a rounded div block
  • The tip is a div rotated 45 degree so that only a triangle tip showed up
<div class="mt-6 flex justify-center items-center">
  <div class="h-16 w-32 rounded-lg bg-indigo-500 relative">
    <div class="absolute -bottom-2 left-6 h-0 w-0 border-8 border-indigo-500 transform rotate-45">
    </div>
  </div>
</div>

Search form

search form

  • No border style: use apperance-none and focus:outline-none
  • Use border-b-2 for border line
<div className="max-w-sm rounded my-10 mx-auto">
      <form className="w-full max-w-sm">
        <div className="flex items-center border-b-2 border-gray-500 py-2">
          <input
            className="appearance-none bg-transparent border-none w-full font-medium text-lg
            text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
            type="text"
            placeholder="Search Image..."
          />
          <button
            className="flex-shrink-0 bg-green-300 hover:bg-green-500 border-green-300 
            hover:border-green-500 text-sm border-4 text-white py-1 px-2 rounded"
            type="submit"
          >
            Search
          </button>
        </div>
      </form>
    </div>

Ping animation

ping animation

  • Use absolute to position the ping circle to the top right corner
  • Two identical circles, one for ping animation, one remains static
<div class="min-h-screen flex items-center justify-center">
  <div class="relative">
    <div class="w-16 h-16 bg-indigo-400 rounded-lg shadow-2xl"></div>
    <div class="absolute top-0 right-0 -mr-1 -mt-1 w-4 h-4 rounded-full bg-green-400 animate-ping"></div>
    <div class="absolute top-0 right-0 -mr-1 -mt-1 w-4 h-4 rounded-full bg-green-400"></div>
  </div>
</div>

Spin animation

spin animation

<div class="min-h-screen flex items-center justify-center">
  <div class="animate-spin">
      <span class="text-5xl">😂</span>
  </div>
</div>

Pulse animation

pulse animation

<div class="p-10 min-h-screen flex items-center justify-center">
  <div class="w-96 p-6 bg-white rounded-lg shadow-2xl border border-gray-400">
    <div class="animate-pulse">
      <div class="flex space-x-6">
        <div class="h-12 w-12 bg-gray-400 rounded-lg"></div>
        <div class="space-y-6">
          <div class="w-40 h-4 bg-gray-400 rounded"></div>
          <div class="space-y-3">
            <div class="w-48 h-4 bg-gray-400 rounded"></div>
            <div class="w-32 h-4 bg-gray-400 rounded"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>