Contents

Tailwind Widgets

Zhengchao Tian included in frontend

2021-05-02 326 words 2 minutes

Contents

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

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

1
2
3
4
5
6
7
<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

No border style: use apperance-none and focus:outline-none
Use border-b-2 for border line

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
<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

1
2
3
4
5
<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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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>