JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h1>Я загадочный блок</h1>
    <p>У меня двойная тень, а оберток нет вообще. Практического смысла во мне нет, просто моему автору хотелось проверить, на что реально годны CSS-тенюшки... :)</p>
    <i class="shadow"></i>
</div>

CSS

div {
    margin: 20px;
    background: #fff;
    min-width: 490px;
    position: relative;
    
}
.shadow { 
    position: absolute;
    height: 10px; 
    background: red;
    width: 100%; 
    bottom: -10px;
}
.shadow:after,
.shadow:before { 
    position: absolute; 
    content: '.';
    width: 120px;
    height: 10px;
    background: green;
}
.shadow:after { left: 0px;}
.shadow:before { right: 0px;}