Create a neon effect with TailwindCSS

<div
    class="w-40 h-20 flex justify-center items-center text-sky-200 border-2 rounded-lg border-sky-200 shadow-[0_0_2px_#fff,inset_0_0_2px_#fff,0_0_5px_#08f,0_0_15px_#08f,0_0_30px_#08f]"
>
    Neon container
</div>

To create a nice neon effect around your container you can use the box-shadow property with multiple values. In TailwindCSS you can control the box-shadow property with the shadow utility class. However, the default values will be not sufficient in this case. Fortunately, with arbitrary values, we can still setup multiple shadow values inside and outside as well.

        <div class="p-10 bg-black">
            <div
                class="w-40 h-20 flex justify-center items-center text-sky-200 border-2 rounded-lg border-sky-200 shadow-[0_0_2px_#fff,inset_0_0_2px_#fff,0_0_5px_#08f,0_0_15px_#08f,0_0_30px_#08f]"
            >
                Neon container
            </div>
        </div>

The code above results in the following neon container: