JSFiddle - React, Tailwind, and code Playground

by Marian Rick

HTML

<div class="textwrap">
    <div class="special">
        <p>Specializations</p>
        <p>With various skills in branding,
            <br />multi-media and advertising I am able to provide
            <br />fresh and inspiring solutions for the task given to me.
            <br />Using various programs such as:</p>
    </div>
</div>
<!--close textwrap-->
<div class="content">
    <div class="divide"></div>
    <!--close divide!-->
</div>
<!--close content!-->
<div class="reason">
    <p>Specializations</p>
    <p>With various skills in branding,
        <br />multi-media and advertising I am able to provide
        <br />fresh and idsapiring solutions for the task given to me.
        <br />Using various programs such as:</p>
</div>
<!--close reason!-->
</div>
<!--close contentwrap!-->

CSS

.content {
    position:relative;
    min-height:212px;
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
    margin:0 auto;
}
.textwrap {
    width:100%;
    background: red;
}
.special {
    background:#006;
    color: #fff;
    padding: 30px;
    max-width: 350px;
    margin: 0 auto;
}
.divide {
    background:url(../images/divide.png) no-repeat top;
    width:100%;
    height:190px;
    margin-top:40px;
    background: yellow;
}
.reason {
    text-align:center;
    max-width:350px;
    margin: 0 auto;
    background:#006;
}