Tailwinds Box-shadow-CodePudding

I want a box shadow effect to look like this picture >>

Currently mine looks like this, How do i made the color darker and have it on all sides.

 <div className="card shadow-xl shadow-gray-900">

This is my current code

CodePudding user response：

Its not possible to do shadow at the center of the div with tailwind's choices so you have to make a custom shadow yourself which is possible in tailwind like this:

<div >
        <p>Hello</p>
</div>

or you can go to tailwind.config.js and add some custom CSS for example:

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
    }
  }
}

or another choice is to just make another CSS file (if you have already then no need to make another CSS file). and then add this:

.customShadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

then as for the html file:

<div >
        <p>Hello</p>
</div>