JSFiddle - React, Tailwind, and code Playground

Cards Pattern Bootstrap Fess Up Update Idea

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<section class="cards">
    
    <div class="card">
        <div class="inner-wrap">
            <a class="title" href="#">Sell digital products from your cloud account products from your cloud account</a>
            <p>People are increasingly creating digital content, and there is no easy way to sell this content. The idea is to create a web platform where sellers can authenticate with their cloud storage accounts and papers.</p>
        </div>
        <div class="likes-bar">
            <p><a href="#"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg" alt="Sandra" />Sandra</a> and <a href="#">10 others</a> like this</p>
        </div>
        <div class="action-bar">
            <ul>
                <li class="comments">
                    <a href="#"><i class="fa fa-comments-o"></i> <span class="comments-link">24 Comments</span></a>
                </li>
                <li class="share">
                    <a href="#"><i class="fa fa-slideshare"></i><span>share</span></a>
                </li>
                <li class="like">
                    <a href="#"><i class="fa fa-heart-o"></i><span>like</span></a>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="card">
        <div class="inner-wrap">
            <a class="title" href="#">Sell digital products from your cloud account products from your cloud account</a>
            <p>People are increasingly creating digital content, and there is no easy way to sell this content. The idea is to create a web platform where sellers can authenticate with their cloud storage accounts and papers.</p>
        </div>
        <div...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);

html {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

*, :before, :after {
  -moz-box-sizing: inherit;
       box-sizing: inherit;
}

body {
  margin: 1em;
  background: #F4F4F6;
    font-family:'Open Sans';
}

.cards {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 37.5em) {
  .cards {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.card {
  width: 100%;
  margin-bottom: 1em;
  background: #fff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 1px #ddd;
}
@media (min-width: 37.5em) {
  .card {
    width: 49%;
  }
}
@media (min-width: 70.5em) {
  .card {
    width: 24%;
  }
}
.card.with-badge:after {
  content: " ";
  border: 30px solid #92BA3F;
  position: absolute;
  top: 0;
  right: 0;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.card .inner-wrap {
  padding: 1.5em;
}
.card .inner-wrap p:last-of-type {
  margin-bottom: 0;
}
.card h3 {
  margin: 0;
  padding-bottom: 1em;
  font-size: .8em;
}
.card h3 a {
  color: #000;
}
.card h3 a:hover {
  color: #000;
}
.card h3 img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: .5em;
}
.card .title {
  line-height: 1.5;
  font-size: 1.2em;
  display: block;
}
.card p {
  margin-top: 1em;
  font-size: .9em;
  color: #777;
  line-height: 1.6;
}
.card a {
  color: #2A91E7;
  text-decoration: none;
}
.card a:hover, .card a:focus {
  color: #1469b1;
  text-decoration: underline;
}
.card .likes-bar {
  border: solid 1px #eee;
...