JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<div class="three columns quote-block">
    <div class="quote-block-top">
         <h5>Lorem ipsum dolor sit</h5>

    </div>
    <ul class="quote-list">
        <li><a href="#">Lorem ipsum dolor sit amet</a><span class="icon-align right"><a href="#"><img src="http://i58.tinypic.com/eah1n6.png"></a></span>
        </li>
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing </a><span class="icon-align right"><a href="#"><img src="http://i58.tinypic.com/eah1n6.png"></a></span>
        </li>
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing </a><span class="icon-align right"><a href="#"><img src="http://i58.tinypic.com/eah1n6.png"></a></span>
        </li>
    </ul>
    <div class="quote-block-bottom"> <a href="#" class="button">Submit</a>

    </div>
</div>

CSS

.columns {
    display:inline-block;
    float:left;
    position:relative;
    margin-right:35px;
}
.three {
    width:240px;
}
.quote-block {
    border: 1px solid #e0e0e0;
    margin-bottom: 57px;
}
.quote-block h6 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    margin-bottom: 40px;
}
.quote-block-top {
    background:#fcfcfc;
    border-bottom: 1px solid #e0e0e0;
    padding: 22px 20px 16px;
}
.quote-block-top h5 {
    font-size:14px;
    color:#494949;
    text-transform:uppercase;
    margin-bottom: 22px;
}
.quote-block-top p {
    font-size:13px;
    color:#808080;
    margin:0;
}
.quote-block-bottom {
    text-align:center;
    border-top: 1px solid #e0e0e0;
    background:#fcfcfc;
    padding: 18px 0;
}
ul.quote-list {
    margin: 0;
    padding: 0;
}
ul.quote-list li {
    font-size: 14px;
    color: #2a80b9;
    border-top: 1px dashed #dbdbdb;
    padding: 18px 20px;
    line-height: 1.2;
    position:relative;
}
ul.quote-list li:first-child {
    border-top: none;
}
ul.quote-list li a {
    color: #2a80b9;
    text-decoration:none;
}
.right {
    float: right;
    position:absolute;
    right:5px;
    top:50%;
    margin:-5px 0 0 0;
}