Tailwind box shadow not applying - css

Question

I'm trying to apply shadow around a box, usually, the shadow applied through tailwind pre-defined classes doesn't show on the top edge, so we need a bit of tweaking for having it shown on all four sides of the element. I tried to add shadow through the tailwind arbitrary class but it's still not showing.
My code looks like:
import React from "react";
export default function HomePage() {
return (
<div className="flex flex-col space-y-24">
<div className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl drop-shadow-[10px_35px_60px_10px_rgba(60,60,60, 0.5)">
<h1 className="text-3xl">Box</h1>
</div>
<div className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl shadow-[10px_35px_60px_10px_rgba(60,60,60, 0.5)">
<h1 className="text-3xl">Box</h1>
</div>
</div>
);
}
And here is the complete sandbox example for this.
https://codesandbox.io/s/box-shadow-9zzvnd?file=/src/components/Homepage.js:0-532

Answer 1

The shadow class is not a built-in class in tailwind. Instead, you can define your custom shadow using the box-shadow propertyy. The updated code should work with your HomePage component.
import React from "react";
export default function HomePage() {
return (
<div className="flex flex-col space-y-24">
<div
className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl"
style={{
boxShadow: "10px 35px 60px 10px rgba(60,60,60, 0.5)"
}}
>
<h1 className="text-3xl">Box</h1>
</div>
<div
className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl"
style={{
boxShadow: "10px 35px 60px 10px rgba(60,60,60, 0.5)"
}}
>
<h1 className="text-3xl">Box</h1>
</div>
</div>
);
}
Let me know if the code is still not working, I'll be happy to help