JSFiddle - React, Tailwind, and code Playground

by DeepakKamat

HTML

<ul class="slides clearfix">
    <li>
        <div class="slide-feature-image"> 
            <a href="http://www.labnol.org/internet/online-accounts-security/19763/"> 
                <img width="160" height="90" src="http://img.labnol.org/di/accounts-160x90.png" class="attachment-post-feature wp-post-image" alt="accounts" title="accounts"> 
            </a>
        </div>
        <div class="slide-content-wrap">
            <h3 class="slide-post-title">
                <a href="http://www.labnol.org/internet/online-accounts-security/19763/">Keep your Online Accounts Safe and Secure</a>
            </h3>
        </div>
    </li>
    <li>
        <div class="slide-feature-image"> 
            <a href="http://www.labnol.org/internet/tips-for-tech-startups/19483/"> </a>
        </div>
        <div class="slide-content-wrap">
            <h3 class="slide-post-title"><a href="http://www.labnol.org/internet/tips-for-tech-startups/19483/">25 Common-Sense Tips for Tech Startups</a></h3></div></li><li><div class="slide-feature-image"> <a href="http://www.labnol.org/internet/android-apps-try-before-buying/19422/"> <img width="98" height="76" src="http://img.labnol.org/di/android_apps.png" class="attachment-post-feature wp-post-image" alt="android apps" title="android apps"> </a></div><div class="slide-content-wrap"><h3 class="slide-post-title"><a href="http://www.labnol.org/internet/android-apps-try-before-buying/19422/">Would You Like to Try Android Apps Before Buying?</a></h3></div></li><li><div class="slide-feature-image"> <a href="http://www.labnol.org/internet/visual-resume/13327/"> <img width="160" height="90" src="http://img.labnol.org/di/job-applicant-160x90.jpg" class="attachment-post-feature wp-post-image" alt="job-applicant" title="job-applicant"> </a></div><div class="slide-content-wrap"><h3 class="slide-post-title"><a href="http://www.labnol.org/internet/visual-resume/13327/">Your Next Résumé Should Look Like This!</a></h3></div></li><li><div...

CSS

.slides {
font-size: 85%;
line-height: 130%;
overflow: hidden;
padding: 0;
margin: 30px 0 10px;
border-bottom: 1px solid 
black;
}
.clearfix, .widget li, #footer, .pagenav, #main-nav, .main-nav, .menu, .gallery, #content {
display: block;
zoom: 1;
}
.slides {
font-size: 85%;
line-height: 130%;
}
.slides .slide-feature-image {
margin: 0 0 10px;
background: none repeat scroll 0 0 
white;
border: 1px solid 
#CCC;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px 
rgba(0, 0, 0, 0.15);
padding: 4px;
}
.slides li {
list-style: none outside none;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}