JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div id="first">
     <h2> 
            Text1
        </h2>

    <div id="second">
         <h2>
                 Text2
            </h2>

    </div>
    <p>text3</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
      -moz-box-sizing: border-box;
       box-sizing: border-box;
}

html, body {
    width: 100%;
}

body {
    padding: 20px;
    background: url(http://dota-freunde.de/dbg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #000000;
    color: #777777;
    font-family:'Open Sans', sans-serif;
}

#first {
    width: 100%;
}

#first >h2, #first > p {
    background: #333;
    padding: 3px;
}

#second>h2 {
    border-top: 20px solid #333;
    border-bottom: 20px solid #333;
    border-left: 10px solid #333;
    border-right: 10px solid #333;
    background: rgba(0, 0, 0, 0.7);
}