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 items-center justify-center">
    <div class="relative h-16 w-32 rounded-lg bg-indigo-500">
        <div
            class="absolute -bottom-2 left-6 h-0 w-0 rotate-45 transform border-8 border-indigo-500"
        ></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="flex min-h-screen items-center justify-center">
    <div class="relative">
        <div class="h-16 w-16 rounded-lg bg-indigo-400 shadow-2xl"></div>
        <div
            class="absolute top-0 right-0 -mt-1 -mr-1 h-4 w-4 animate-ping rounded-full bg-green-400"
        ></div>
        <div
            class="absolute top-0 right-0 -mt-1 -mr-1 h-4 w-4 rounded-full bg-green-400"
        ></div>
    </div>
</div>

Spin animation

spin animation

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

Pulse animation

pulse animation

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