JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<div class="box-left round">Left</div>
<div class="box-right round">Right</div>

CSS

body {
    background: url('http://www.miamishared.com/sliders/cycle/cycle1/images/shared-office-space_3.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.box-left {
    float : left;
    height: 10em;
    padding-top: 2em;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: black;
    border-top: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    margin-top: 5.0em;
    color:#fff;
    width: 100px;
}
.box-right {
    float :right;
    height: 10em;
    padding-top: 2em;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: black;
    border-top: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    margin-top: 5.0em;
    color:#fff;
    width: 400px;
}
.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}