原文鏈接: tailwind 一些案例
新手學習的過程中全量引入css吧, 免得一個個去配置
npx tailwindcss-cli@latest build -o tailwind.css
container
container, sm,lg 這些查詢不是小於, 而是達到, 寬度達到640顯示紅色, 達到1024顯示綠色
<div
class="container-full h-8 bg-blue-400 sm:bg-red-800 lg:bg-green-600"
></div>
居中
套一個父級, 實現一個居中的色塊div
<div class="container-full bg-blue-400 sm:bg-red-800 lg:bg-green-600">
<div class="rounded-md mx-auto h-32 w-32 bg-blue-500"></div>
</div>
漸變背景, 複雜嵌套居中
<div
class="rounded-xl overflow-hidden bg-gradient-to-r from-green-50 to-blue-100 p-10"
>
<div class="flex items-center justify-around">
<div
class="box-border h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md"
>
<div
class="h-full w-full bg-blue-400 bg-stripes bg-stripes-white"
></div>
</div>
</div>
</div>
grid佈局和對齊
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-amber-50 to-amber-100 p-10"
>
<div class="grid grid-cols-3 gap-4">
<div>
<p class="text-center text-sm text-amber-600 font-medium mb-1">
Left Top
</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-left-top object-none"
src="../assets/logo.png"
/>
</div>
<div>
<p class="text-center text-sm text-amber-600 font-medium mb-1">Top</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-top object-none"
src="../assets/logo.png"
/>
</div>
<div>
<p class="text-center text-sm text-amber-600 font-medium mb-1">
Right Top
</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-right-top object-none"
src="../assets/logo.png"
/>
</div>
<div>
<p class="text-center text-sm text-amber-600 font-medium mb-1">Left</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-left object-none"
src="../assets/logo.png"
/>
</div>
<div>
<p class="text-center text-sm text-amber-600 font-medium mb-1">
Center
</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-center object-none"
src="../assets/logo.png"
/>
</div>
<div>
<p class="text-center text-sm text-amber-600 font-medium mb-1">Right</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-right object-none"
src="../assets/logo.png"
/>
</div>
<div>
<p class="text-center text-sm text-amber-600 font-medium mb-1">
Left Bottom
</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-left-bottom object-none"
src="../assets/logo.png"
/>
</div>
<div class="flex-1">
<p class="text-center text-sm text-amber-600 font-medium mb-1">
Bottom
</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-bottom object-none"
src="../assets/logo.png"
/>
</div>
<div class="flex-1">
<p class="text-center text-sm text-amber-600 font-medium mb-1">
Right Bottom
</p>
<img
class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-right-bottom object-none"
src="../assets/logo.png"
/>
</div>
</div>
</div>
相對和絕對佈局
<div class="relative overflow-hidden mb-8">
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-indigo-50 to-indigo-100 p-10"
>
<div class="space-y-6">
<div>
<p class="text-sm text-indigo-900 mb-2">With static positioning</p>
<div class="relative bg-indigo-200 px-6 pt-2 pb-6 font-medium">
<p class="mb-2 text-indigo-600">Relative parent</p>
<div class="static bg-indigo-300 p-4 text-indigo-700">
<p class="mb-2">Static parent</p>
<div
class="static bottom-0 left-0 bg-indigo-500 p-4 text-indigo-50 inline-block"
>
<p>Static child</p>
</div>
<div class="bg-indigo-200 p-4 text-indigo-600 inline-block">
<p>Static sibling</p>
</div>
</div>
</div>
</div>
<div>
<p class="text-sm text-indigo-900 mb-2">With absolute positioning</p>
<div class="relative bg-indigo-200 px-6 pt-2 pb-6 font-medium">
<p class="mb-2 text-indigo-600">Relative parent</p>
<div class="static bg-indigo-300 p-4 text-indigo-700">
<p class="mb-2">Static parent</p>
<div
class="absolute top-0 right-0 bg-indigo-500 p-4 text-indigo-50 inline-block"
>
<p>Absolute child</p>
</div>
<div class="bg-indigo-200 p-4 text-indigo-600 inline-block">
<p>Static sibling</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden rounded-b-xl bg-indigo-400">
<pre
class="scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white bg-black bg-opacity-75"
><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>static ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- Static parent --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>static ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Static child<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inline-block ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Static sibling<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- Static parent --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">absolute</span> ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Absolute child<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inline-block ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Static sibling<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
</div>
</div>
黏貼效果
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-blue-100 p-10"
>
<div class="h-64 overflow-auto">
<div>
<div
class="sticky top-0 bg-blue-200 px-2 py-1 font-semibold text-blue-600 rounded-md"
>
Sticky Heading 1
</div>
<p class="py-4 font-medium text-blue-500">
Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at
interdum magna augue eget diam. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia
molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet
augue congue elementum. Morbi in ipsum sit amet pede facilisis
laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et,
augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices
enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar
ullamcorper. Nulla facilisi.
</p>
</div>
<div>
<div
class="sticky top-0 bg-blue-200 px-2 py-1 font-semibold text-blue-600 rounded-md"
>
Sticky Heading 2
</div>
<p class="py-4 font-medium text-blue-500">
Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a
tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis
tristique, dignissim in, ultrices sit amet, augue. Proin sodales
libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus,
commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan
porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci.
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum
non, convallis id, sagittis at, neque.
</p>
</div>
<div>
<div
class="sticky top-0 bg-blue-200 px-2 py-1 font-semibold text-blue-600 rounded-md"
>
Sticky Heading 3
</div>
<p class="py-4 font-medium text-blue-500">
Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis
lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
tellus sed augue semper porta. Mauris massa.
</p>
</div>
<div>
<div
class="sticky top-0 bg-blue-200 px-2 py-1 font-semibold text-blue-600 rounded-md"
>
Sticky Heading 4
</div>
<p class="py-4 font-medium text-blue-500">
Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at
interdum magna augue eget diam. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia
molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet
augue congue elementum. Morbi in ipsum sit amet pede facilisis
laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et,
augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices
enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar
ullamcorper. Nulla facilisi.
</p>
</div>
<div>
<div
class="sticky top-0 bg-blue-200 px-2 py-1 font-semibold text-blue-600 rounded-md"
>
Sticky Heading 5
</div>
<p class="py-4 font-medium text-blue-500">
Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a
tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis
tristique, dignissim in, ultrices sit amet, augue. Proin sodales
libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus,
commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan
porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci.
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum
non, convallis id, sagittis at, neque.
</p>
</div>
<div>
<div
class="sticky top-0 bg-blue-200 px-2 py-1 font-semibold text-blue-600 rounded-md"
>
Sticky Heading 6
</div>
<p class="py-4 font-medium text-blue-500">
Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis
lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
tellus sed augue semper porta. Mauris massa.
</p>
</div>
</div>
</div>
grid佈局中子元素位置
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-blue-100 p-10"
>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute inset-x-0 top-0 h-16 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
1
</div>
</div>
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute inset-y-0 right-0 w-16 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
2
</div>
</div>
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute inset-x-0 bottom-0 h-16 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
3
</div>
</div>
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute inset-y-0 left-0 w-16 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
4
</div>
</div>
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute inset-0 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
5
</div>
</div>
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute left-0 top-0 h-16 w-16 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
6
</div>
</div>
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute top-0 right-0 h-16 w-16 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
7
</div>
</div>
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute right-0 bottom-0 h-16 w-16 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
8
</div>
</div>
<div
class="relative p-2 h-32 w-32 bg-blue-300 bg-stripes bg-stripes-white rounded-md"
>
<div
class="absolute bottom-0 left-0 h-16 w-16 bg-blue-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md"
>
9
</div>
</div>
</div>
</div>
z-index
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-blue-100 p-4"
>
<div
class="flex justify-center relative h-28 text-center transform translate-x-12"
>
<div
class="z-40 relative w-20 h-20 bg-blue-500 border-r border-opacity-50 border-blue-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold"
>
5
</div>
<div
class="z-30 relative w-20 h-20 -left-6 top-2 bg-blue-500 border-r border-opacity-50 border-blue-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold"
>
4
</div>
<div
class="z-20 relative w-20 h-20 -left-12 top-4 bg-blue-500 border-r border-opacity-50 border-blue-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold"
>
3
</div>
<div
class="z-10 relative w-20 h-20 -left-18 top-6 bg-blue-500 border-r border-opacity-50 border-blue-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold"
>
2
</div>
<div
class="z-0 relative w-20 h-20 -left-24 top-8 bg-blue-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold"
>
1
</div>
</div>
</div>
grid佈局排列合併
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 bg-white p-8"
>
<div class="grid grid-cols-3 gap-4">
<div
class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold"
>
1
</div>
<div
class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold"
>
2
</div>
<div
class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold"
>
3
</div>
<div
class="col-span-2 bg-purple-500 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold"
>
4
</div>
<div
class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold"
>
5
</div>
<div
class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold"
>
6
</div>
<div
class="col-span-2 bg-purple-500 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold"
>
7
</div>
</div>
</div>
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-blue-100 bg-white p-8"
>
<div class="grid grid-cols-6 gap-4">
<div
class="bg-stripes bg-stripes-blue-500 bg-blue-300 bg-opacity-25 h-12 rounded-md flex items-center justify-center text-white text-2xl font-extrabold"
></div>
<div
class="col-start-2 col-span-4 bg-blue-500 h-12 rounded-md flex items-center justify-center text-white text-2xl font-extrabold"
>
1
</div>
<div
class="bg-stripes bg-stripes-blue-500 bg-blue-300 bg-opacity-25 h-12 rounded-md flex items-center justify-center text-white text-2xl font-extrabold"
></div>
<div
class="col-start-1 col-end-3 bg-blue-500 h-12 rounded-md flex items-center justify-center text-white text-2xl font-extrabold"
>
2
</div>
<div
class="bg-stripes bg-stripes-blue-500 bg-blue-300 bg-opacity-25 h-12 rounded-md flex items-center justify-center text-white text-2xl font-extrabold"
></div>
<div
class="bg-stripes bg-stripes-blue-500 bg-blue-300 bg-opacity-25 h-12 rounded-md flex items-center justify-center text-white text-2xl font-extrabold"
></div>
<div
class="col-end-7 col-span-2 bg-blue-500 h-12 rounded-md flex items-center justify-center text-white text-2xl font-extrabold"
>
3
</div>
<div
class="col-start-1 col-end-7 bg-blue-500 h-12 rounded-md flex items-center justify-center text-white text-2xl font-extrabold"
>
4
</div>
</div>
</div>
漸變色文字
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-blue-100 p-10"
>
<div
class="text-center text-5xl font-extrabold leading-none tracking-tight"
>
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500"
>
Hello world
</span>
</div>
</div>
漸變色背景
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-gray-50 to-gray-100 p-10"
>
<div
class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"
></div>
</div>
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-gray-50 to-gray-100 p-10"
>
<div class="h-24 bg-gradient-to-r from-green-400 to-blue-500"></div>
</div>
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-gray-50 to-gray-100 p-10"
>
<div class="h-24 bg-gradient-to-r from-red-500"></div>
</div>
圓角和圓形
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-indigo-50 to-indigo-100 p-10"
>
<div class="flex justify-center items-center space-x-6">
<div
class="bg-indigo-500 px-6 py-3 text-white text-center font-extrabold rounded-full"
>
Pill Shape
</div>
<div
class="bg-indigo-500 h-24 w-24 text-white text-center font-extrabold flex items-center justify-center rounded-full"
>
Circle
</div>
</div>
</div>
不同的border
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-indigo-50 to-indigo-100 p-10"
>
<div class="grid grid-cols-2 gap-2 lg:grid-cols-3">
<div
class="border-solid h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold text-indigo-600 flex justify-center items-center"
>
.border-solid
</div>
<div
class="border-dashed h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold text-indigo-600 flex justify-center items-center"
>
.border-dashed
</div>
<div
class="border-dotted h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold text-indigo-600 flex justify-center items-center"
>
.border-dotted
</div>
<div
class="border-double h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold text-indigo-600 flex justify-center items-center"
>
.border-double
</div>
<div
class="border-none h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold text-indigo-600 flex justify-center items-center"
>
.border-none
</div>
</div>
</div>
環繞框ring
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-blue-100 p-0 border -mb-px"
>
<div
class="bg-green-60 grid grid-cols-1 sm:grid-cols-3 gap-6 justify-items-center p-8"
>
<button
tabindex="-1"
class="focus:outline-none text-sm w-32 py-3 rounded-md font-semibold text-white bg-pink-500 ring ring-pink-600 ring-offset-0"
>
ring-offset-0
</button>
<button
tabindex="-1"
class="focus:outline-none text-sm w-32 py-3 rounded-md font-semibold text-white bg-pink-500 ring ring-pink-600 ring-offset-2"
>
ring-offset-2
</button>
<button
tabindex="-1"
class="focus:outline-none text-sm w-32 py-3 rounded-md font-semibold text-white bg-pink-500 ring ring-pink-600 ring-offset-4"
>
ring-offset-4
</button>
</div>
</div>
transform動畫
<div
class="rounded-t-xl overflow-hidden bg-gradient-to-r from-light-blue-50 to-light-blue-100 p-10"
>
<div class="text-center">
<button
class="transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 bg-blue-600 hover:bg-red-600 text-white font-semibold py-3 px-6 rounded-md"
>
Hover me
</button>
</div>
</div>