Tailwind CSS Box Shadow Example

In this section we will see how to use box shadow in tailwind css. we will see, shadow sizes, custom shadow , tailwind shadow sizes, shadow button, card with shadow example with Tailwind CSS 3.
view

Example 1

Tailwind shadow utilities size shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, or shadow-2xl .

<div class="p-6 shadow-md">Shadow-md</div>
<div class="p-6 shadow-lg">Shadow-lg</div>
<div class="p-6 shadow-xl">Shadow-xl</div>
<div class="p-6 shadow-2xl">Shadow-2xl</div>

tailwind .shadow-inner class for apply shadow inner box.

<div class="p-6 shadow-inner">shadow-inner</div>

.shadow-none use for removing shadow effect.

<div class="p-6 shadow-none">shadow-none</div>

Example 2

tailwind using shadow with hover class.

<div class="p-6 shadow hover:shadow-lg">Shadow hover</div>

Tailwind CSS shadow button with shadow effect.

<button class="px-6 py-2 rounded shadow bg-rose-400 hover:shadow-lg text-rose-100">Button</button>

Example 3

Using responsive shadow box.

<div class="p-6 shadow lg:shadow-lg md:shadow-md">Responsive Shadow</div>

Tailwind CSS custom shadow arbitrary values

<div class="p-6 shadow-[0px_0px_3px_rgba(3,102,214,0.3)]">Custom Shadow</div>
<div class="p-6 shadow-[0px_22px_70px_4px_rgba(0,0,0,0.56)]">Custom Shadow</div>

Tailwind CSS card with shadow.

<div class="w-full p-6 bg-white border border-gray-200 rounded-lg shadow-md lg:max-w-md">
    <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Tailwind CSS Card with Shadow</h2>
    <p class="mb-3 font-normal text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quasi
        autem accusamus odio minima fugiat, consectetur recusandae assumenda.</p>
    <a href="#"
        class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:outline-none">
        Read more
    </a>
</div>