JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Блок с тенью</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="style2.css" />
    </head>
    <body>
        <div id="tabs">
            <div id="tab"><span>Заголовок</span></div>
            <div id="tab_content">Содержание блока</div>
        </div>
    </body>
</html>

CSS

html, body, div{
    margin:0;
    padding:0;
    background: transparent;
    outline: 0;
    border: 0;
    font-family: sans-serif;
}

#tabs{
    margin: 10px; 
}

#tab{
   padding: 5px 0;
   background-color: #C9E39C;
   border: 1px solid #A9D971; 
   border-bottom: 0;
   border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    font-weight: bold;
   max-width: 250px;
   display: inline-block;
   margin-bottom: -1px;
   box-shadow: 0 0 5px black;
   box-shadow: 0 0 5px rgba(0,0,0,0.5);
   -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
   -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

#tab span{
   padding: 0 8px 15px 8px;
   background-color: #C9E39C;
   border-radius: 8px 8px 0 0;
   -moz-border-radius: 8px 8px 0 0;
   -webkit-border-radius: 8px 8px 0 0;
}

#tab_content{
    padding: 8px;
    background-color: #C9E39C;
    border: 1px solid #A9D971;
    border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    height: 150px;
    font-size: 0.9em;
    box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}