JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div class="storycover">
    <div class="area">
        <div class="title">
             <h1>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h1>

        </div>
        <div class="users-box">
            <div id="story-users">
                <ul>
                    <li class="circle current">
                        <img src="http://lorempixel.com/output/people-q-c-70-70-1.jpg" />
                    </li>
                    <li class="circle">
                        <img src="http://lorempixel.com/output/people-q-c-70-70-2.jpg" />
                    </li>
                    <li class="circle">
                        <img src="http://lorempixel.com/output/people-q-c-70-70-3.jpg" />
                    </li>
                    <li class="circle">
                        <img src="http://lorempixel.com/output/people-q-c-70-70-4.jpg" />
                    </li>
                    <li class="circle">
                        <img src="http://lorempixel.com/output/people-q-c-70-70-5.jpg" />
                    </li>
                    <li class="circle">
                        <img src="http://lorempixel.com/output/people-q-c-70-70-6.jpg" />
                    </li>
                    <li class="circle">
                        <img src="http://lorempixel.com/output/people-q-c-70-70-7.jpg" />
                    </li>
                    <li class="circle">
                        <img src="http://lorempixel.com/output/people-q-c-70-70-1.jpg" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
</div>
<div class="info">
        
<p class="desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper lacinia eros nec suscipit. Mauris vel porta magna, congue posuere lacus. Phasellus cursus, nisl id interdum eleifend, ipsum erat convallis diam, a porta lacus diam in tortor. Ut vitae nisi sodales, accumsan odio et, adipiscing nisl. Phasellus augue...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 * {
    padding:0;
    margin:0;
    font-family:'Open Sans', sans-serif;
}
.cf:after {
    content:".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
body {
    margin: 0 auto;
    display: block;
    width:640px;
    background:#fdfdfd;
}
.area {
    width: 640px;
    height: 380px;
    position: relative;
    float: left;
}
.title {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 600px;
    height: 340px;
    display: table;
}
h1 {
    color:#fff;
    font-size: 2em;
    font-weight:600;
    text-shadow: 3px 0px 0px #000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.storycover {
    display:block;
    width: 640px;
    height:470px;
    background:url('http://lorempixel.com/640/470/nature/');
}
.users-box {
    background:rgba(50, 50, 50, .7);
    width: 624px;
    height:74px;
    padding:8px;
    position:absolute;
    top:380px;
    opacity:.9;
}
ul, li {
    display:inline-block;
    margin:0;
    padding:0;
}
.circle img {
    width:58px;
    height:58px;
    border-radius:70px;
    color:#fff;
    line-height:22px;
    text-align:center;
    vertical-align:middle"

}
.circle {
    border: 6px solid rgba(255, 255, 255, .3);
    -webkit-background-clip: padding-box;
    /* for Safari */
    background-clip: padding-box;
    /* for IE9+, Firefox 4+, Opera, Chrome */
    width:58px;
    height:58px;
    border-radius:70px;
    color:#fff;
    line-height:8px;
    text-align:center;
    margin:2px;
}
.circle.current {
    border: 6px solid rgba(255, 255, 255, 1);
}
.circle:hover {
    border: 6px solid rgba(255, 255, 255, 1);
}
.info{
    width:608px;
    padding: 14px 16px;
    font-size: 1.2em;
    line-height:1.2em;
    font-weight:100;
    color:#565454;
}

.request img,
.count img{
    width:1.2em;
    height:1.2em;   
}