JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>2</title>
    <meta charset="utf-8">

</head>
<body>
    <div class="case">
        <div class="basis">
            <h1><span>Заголовок</span></h1>
            <div class="content"><p>Содержание</p></div>
        </div>
    </div>   
    
</body> 
</html>

CSS

html,body { background: url(http://psywalker.ru/Forum/Menu/L-Menu/img/lope.png);}    
    .case {
        padding: 10px;
        background: rgba(118,234,186,0.8);
        -o-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 3px solid rgba(66,93,82,0.6);
background: rgba(101,178,28,0.1); 
background: -moz-linear-gradient(top, rgba(101,178,28,0.8) 8%, rgba(151,214,109,0.3) 72%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#65b21c), color-stop(72%,#97d66d));
background: -webkit-linear-gradient(top, rgba(101,178,28,0.8) 8%,rgba(151,214,109,0.3) 72%); 
background: -o-linear-gradient(top, rgba(101,178,28,0.8) 8%,rgba(151,214,109,0.3) 72%); 
background: -ms-linear-gradient(top, rgba(101,178,28,0.8) 8%,rgba(151,214,109,0.3) 72%);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#8065b21c', endColorstr='#3097d66d')";

        
    }
    .basis {
        background: #abb6b2;
        -o-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #111;
        background: #FC0;
    background: #ffdb28; /* Old browsers */
background: -moz-linear-gradient(top, #ffdb28 8%, #e8d676 88%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#ffdb28), color-stop(88%,#e8d676)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffdb28 8%,#e8d676 88%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffdb28 8%,#e8d676 88%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffdb28 8%,#e8d676 88%); /* IE10+ */

background: linear-gradient(top, #ffdb28 8%,#e8d676 88%);    
        
    }
    h1,p { margin: 0;}
    h1 { 
        position: relative;
        font: bold 25px/40px "Trebuchet MS", Arial, Helvetica, sans-serif;
        padding: 0px 10px 0;
    }
    h1 span { position: relative; z-index: 1;}
    h1:after { 
        position: absolute; 
       ...