JSFiddle - React, Tailwind, and code Playground

by Gretchen Ward

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="row">
    <div class="container">
       <div class="col-xs-12 col-md-12 col-lg-12">
           <div id="card" class="col-md-4 col-lg-4"><h2>Header</h2><img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /></div>
           
            <div id="card" class="col-md-4 col-lg-4"><h2>Header</h2><img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /></div>
            
            <div id="card" class="col-md-4 col-lg-4"><h2>Header</h2><img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /></div>
            
            <div id="card" class="col-md-4 col-lg-4"><h2>Header</h2><img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /></div>
    

</div>
</div>
</div>
<div class="row">
    <div class="container">
       <div class="col-xs-12 col-md-12 col-lg-12">
            <div id="card" class="col-md-4 col-lg-4"><h2>Header</h2><img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /></div>
           
            <div id="card" class="col-md-4 col-lg-4"><h2>Header</h2><img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /></div>
            
            <div id="card" class="col-md-4 col-lg-4"><h2>Header</h2><img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /></div>
            
            <div id="card" class="col-md-4 col-lg-4"><h2>Header</h2><img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /></div>
    

</div>
</div>
</div>

CSS

.container {
text-align: center;
}

#card {
  background: #FAFAFA;
  width: 150px;
  height: 150px;
  margin-bottom: 30px;
  margin-left: 15px;
  margin-right: 15px;
  overflow: hidden;
  display: inline-block;
}

#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}

img {
float: left;
}