JSFiddle - React, Tailwind, and code Playground

by J R

HTML

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
body {
    padding-top: 15px;
}  
.activeClas{
    border:2px solid green; 
    background-color: rgba(100,100,100,0.1);
    line-height:50px;
    width: 30%;
}
.divClass{
    width: 35%;
    height:50px;
    text-align:center;
    line-height:50px;
    float: left;
    left:15px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-right: 15px;
    color: orange;
    font-size: 18px;
    border:2px solid #000; 
    background-color: rgba(00,00,00,0.6);
}  
.textdiv{
    border:2px solid green; 
    background-color: rgba(100,100,100,0.1);
    height:50px;
    text-align:center;
    line-height:50px;
    margin-top: 25px;
}
i {
    color:#000;
    font-size: 40px;
    line-height:50px;
} 
.btn {
    height: 50px;
    margin-top: 25px;
    margin-left: 15px;
}    
.active-selection {
    background-color:rgba(100,100,100,0.1);
    width: 35%;
    font-size: 40px;
    text-align: center;
    border:2px solid green; 
} 
.coverThisBlock{
    width: 33%;
    height: inherit;
    background-color: rgba(00,00,00,0.8);
    z-index: 9;
} 
.block-1 {
    background-color: rgba(00,00,100,0.3);
}
.block-2 {
    width: 25% !important;
    background-color: rgba(00,00,00,0.5);
}
.block-3 {
    background-color: rgba(00,100,00,0.7);
}
.block-4 {
    width: 25% !important;
    background-color: rgba(100,00,00,0.5);
}
.block-5 {
    width: 20% !important;
    background-color: rgba(00,100,00,0.7);
}    
@media (max-width:420px){
.coverThisBlock{
    width: 80%;
}
}      
</style>
<body>

<div class="container" ng-app="plusMinusApp"  ng-controller="plusMinusController" ng-init="setToInitialState()">
<h1>Only One at a Time</h1>
<div class="row" ng-repeat="block in blocks">
    <div class="col-sm-4 col-xs-6" data-ng-class="{ 'coverThisBlock':...

CSS

body {
    padding-top: 15px;
}  
.activeClas{
    border:2px solid green; 
    background-color: rgba(100,100,100,0.1);
    line-height:50px;
    width: 30%;
}
.divClass{
    width: 35%;
    height:50px;
    text-align:center;
    line-height:50px;
    float: left;
    left:15px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-right: 15px;
    color: orange;
    font-size: 18px;
    border:2px solid #000; 
    background-color: rgba(00,00,00,0.6);
}  
.textdiv{
    border:2px solid green; 
    background-color: rgba(100,100,100,0.1);
    height:50px;
    text-align:center;
    line-height:50px;
    margin-top: 25px;
}
i {
    color:#000;
    font-size: 40px;
    line-height:50px;
} 
.btn {
    height: 50px;
    margin-top: 25px;
    margin-left: 15px;
}    
.active-selection {
    background-color:rgba(100,100,100,0.1);
    width: 35%;
    font-size: 40px;
    text-align: center;
    border:2px solid green; 
} 
.coverThisBlock{
    width: 33%;
    height: inherit;
    background-color: rgba(00,00,00,0.8);
    z-index: 9;
} 
.block-1 {
    background-color: rgba(00,00,100,0.3);
}
.block-2 {
    width: 25% !important;
    background-color: rgba(00,00,00,0.5);
}
.block-3 {
    background-color: rgba(00,100,00,0.7);
}
.block-4 {
    width: 25% !important;
    background-color: rgba(100,00,00,0.5);
}
.block-5 {
    width: 20% !important;
    background-color: rgba(00,100,00,0.7);
}    
@media (max-width:420px){
.coverThisBlock{
    width: 80%;
}
}