JSFiddle - React, Tailwind, and code Playground

by toreoo123456

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="container">
  <h1>Hello World!</h1>
  <p>opacity: 0.5; /*透明度設為 0.5*/</p>
  <br>
  <div class="row">
    <div class="col-xs-3 col-sm-3 ">
    	<div class="cls_effect">
        1234
        </div>
    </div>
    <div class="col-xs-3 col-sm-3 ">
    	<div class="cls_effect">
        567	
        </div>
    </div>
    <div class="col-xs-3 col-sm-3 ">
    	<div class="cls_effect">
        89
        </div>
    </div>
    <div class="col-xs-3 col-sm-3 ">
    	<div class="cls_effect">
        1
        </div>
    </div>
  </div>
</div>

CSS

.cls_effect{
    background-color:#0084ff;    
    color:#FFFFFF;
    padding:10px;
    border:2px solid;
    border-radius:5px;
    width:100%;
    text-align:center;
  }
  .cls_effect:hover{
    opacity: 0.5;
  }