JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<div class='button'>
  <img src='http://www.qsrinternational.com/MediaLibraries/QSR/test-3/NVivo-logo.png?ext=.png' />
  <h3>for Windows</h3>
  <button>Resources</button>
  <button>Video Tutorials</button>
  <div style="clear:both">

  </div>
</div>

<div class='button'>
  <img src='http://www.qsrinternational.com/MediaLibraries/QSR/test-3/NVivo-logo.png?ext=.png' />
  <h3>for Mac</h3>
  <button>Resources</button>
  <button>Video Tutorials</button>
  <div style="clear:both">

  </div>
</div>

CSS

div.button {
  margin: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 200px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #ccc;
  font-family: Verdana, Geneva, sans-serif;
  display: inline-block;
}

div.button img {
  width: 100%;
  margin: 10px 0px;
  display: block;
  border-bottom: 1px solid #cdcdcd;
}

div.button h3 {
  font-weight: normal;
  font-size: 0.99em;
}

div.button button {
  padding: 12px;
  border: 0px;
  background-color: #0055A2;
  color: white;
  font-size: 0.8em;
  margin-bottom: -1px;
  display: inline-block;
}

div.button button:nth-child(odd) {
  float: left;
  border-bottom-left-radius: 10px;
  border-right: 1px solid #efefef;
}

div.button button:nth-child(even) {
  float: right;
  padding: 12px 11px;
  border-bottom-right-radius: 10px;
}

JavaScript

/*
nav ul#topnav li {
    border: none;
    font-size: 90%;
    display: table-cell;
    font-weight: bold;
    padding: 2px 14px 2px 0px;
    margin-bottom: 12px;
    }
    
    
    ul#topnav {
        display: table-cell;
    height: 16px;
    width: 880px;
    border-bottom: 2px solid #DCDCDC;
    border-top: 2px solid #DCDCDC;
    }
    h2.navname {
        font-weight: bold;
    }
    */