JSFiddle - React, Tailwind, and code Playground

by ankit saxena

HTML

<header class="clearfix" style="background:#b49e66; padding:20px; width:98%; float:left; margin-bottom:30px;">

<h2 style="text-shadow: 4px 4px 0px #41838e; font-size: 62px; font-family: arial; color: #fff; font-weight: 400; line-height:normal; float:left; width:100%;">CSS Zilla

                    <span style="font-weight: 700; text-transform: uppercase; letter-spacing: 10px; font-size: 18px;color: #F26328;text-shadow: none; font-family: arial; float:left; width:100%;">CSS innovation simplified</span></h2>

</header>

<div class="block_div" style="float:left; width:100%; margin:40px 0px; clear:both; position:relative;">
<div class="hexagon"><span></span></div>
</div>

CSS

<style>
.hexagon {
    width: 100px;
    height: 55px;
    position: absolute;
}
.hexagon, .hexagon:before, .hexagon:after {
    background: red;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    box-shadow: 0 0 10px rgba(0,0,0,0.8);   
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    left: 22px;
    width: 57px;
    height: 57px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
    top: -29px;
}
.hexagon:after {
    top: 27px;
}
.hexagon span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 55px;
    background:red;
    z-index: 1;
}

.block_div { float:left; width:100%; margin:40px 0px; clear:both;}

</style>