JSFiddle - React, Tailwind, and code Playground

by Santhosh Nelson

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://www.google.co.in/url?sa=i&amp;rct=j&amp;q=&amp;esrc=s&amp;source=images&amp;cd=&amp;cad=rja&amp;uact=8&amp;ved=0CAcQjRw&amp;url=http%3A%2F%2Fwww.sanmarco.org%2Feng%2Factivities%2Fdiscos%2Fdesideria-disco-club.html&amp;ei=os12VLSWCMOTuATwwoDoBA&amp;bvm=bv.80642063,d.c2E&amp;psig=AFQjCNFKFh4kLdPl"></script>
<div class='customHeight'>
<div class='row'>
    <div class='col-sm-6 custom'>
        <div class='dateHolder'>27 Nov</div>
    </div>
      <div class='col-sm-6'>
          <div class='row '>
              <h3>Some title goes here</h3>
          </div>
          <div class="row bottomGap">
              location / date goes here 
          </div>
          <div class="row bottomGap">
                              Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
              
          </div>
          <div class='row'>
              <button class="btn btn-default">Buy Tickets<button>
                <button class="btn btn-danger">Buy Tickets<button>
          </div>
    </div>
    
</div>
              </div>

CSS

.bottomGap{
    margin-bottom:5px;
}

.custom {
   background-color: #ccc;
    height:200px; 
}
.customHeight{
 height:200px;   
    
}
.dateHolder{
    height:80px;
    width:50px;
    background-color:#000;
    padding-top:10px;
    padding-left:10px;
}