JSFiddle - React, Tailwind, and code Playground

by madhugb

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <h2 class="pageHeader text-center">
      Welcome to this page
    </h2>
  </div>
  <div class="row widgetContainer">    
      <div class="widgetBox widgetLong">
        <div class="card-icon-wrap">
            <img class="icon-app"  src="https://www.gravatar.com/avatar/abcd/?default=&s=85">
          </div>
          <h3 class="card-title">Full row app</h3>
          <p class="card-description" role="button">Hello welcome to test page this is test message... <a target="_blank" href="#"><span>Learn more</span></a></p>
          <div class="card-action-wrap">            
            <div class="clearfix">
              <div class="action-button">Create Listing</div>
            </div>
          </div>
          <div class="hr-divider"></div>
          <div class="list-app-wrap clearfix">
            <div class="list-app-icon-wrap">            
              <img class="list-app-icon"  src="https://www.gravatar.com/avatar/abcd/?default=&s=50">
            </div>
            <div class="list-app-details">            
              <h3 class="list-app-name">List App #1</h3>
              <p class="list-app-desc">This is the new list app#1 <a href="#"><span>Create listing</span></a></p>
            </div>
          </div>
          
          <div class="list-app-wrap clearfix">
            <div class="list-app-icon-wrap">            
              <img class="list-app-icon"  src="https://www.gravatar.com/avatar/abcd/?default=&s=50">
            </div>
            <div class="list-app-details">            
              <h3 class="list-app-name">List App #2</h3>
              <p class="list-app-desc">This is the new list app#2 <a href="#"><span>Create listing</span></a></p>
            </div>
          </div>          
     ...

CSS

* {
  font-size: 14px;
  font-family: sans-serif;
}

body {
  background-color: #efefef;
}

.pageHeader {
  height: 250px;
  padding: 100px 0;
  background-color: #336655;
  color: #fff;
  margin:0;
  font-size: 3em;
}
  
.widgetContainer {
  margin: 25px auto;
  position:relative;
  transition: all 0.25s ease-out;
}
.left-col{
  width:430px;
  float:left;  
}
.right-col{
  float:left;  
}
@media (max-width:910px){
  .widgetContainer {
    max-width:432px;
  }
  .right-col{
    width:49.9999%;
  }
}

@media (min-width: 911px) and (max-width: 1344px) {
  .widgetContainer {
    max-width:864px;
  }
  .right-col{
    width:49.9999%;
  }
}

@media (min-width: 1345px) {
  .widgetContainer {
    max-width:1298px;
  }
  .right-col{
    width:66.666661%;
  }
}

.widgetBox {
  width:400px;
  height: 320px;
  margin: 25px 15px;
  padding: 15px;
  border:1px solid #aaa;
  position:relative;
  float:left;
  background-color:#fff;
  text-align:center;
}

.widgetLong {
  height: auto;
  min-height: 500px;
}

.widgetBox > .card-icon-wrap {
  padding-bottom: 15px;
  width:100px;  
  margin:0 auto;
}

.widgetBox > .card-icon-wrap > .icon-app{
  height: 85px;
  width: 85px;
}

.widgetBox > .card-title{
  font-size: 21px;
  font-weight: 300;
  text-align: center;
  text-decoration: none;
}

.widgetBox > .card-description{
  color: #666666;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

.widgetBox > .card-action-wrap{
  
}

.widgetBox > .card-action-wrap > .download-app-text{
  display: block;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  padding: 5px;
  text-align: center;
}

.widgetBox > .card-action-wrap .action-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  background-color:#ddd;         
}

.widgetBox > .card-action-wrap .action-button {  
  display: inline-block;
  border: 1px solid...