JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div class="d">我已是南臺粉絲</div>
<br/>
<div class="btn-aqua">
  <div class="blaze">
    
  </div>
  點此投票
</div>

CSS

.d{
  border: 3px solid #CC0000;
  color:red;
  width:140px;
  text-align:center;
  line-height:30px;
  border-radius:10px;
  font-weight:800;
  background:#FFCC22;
  }
  
  .btn-aqua{
    position:relative;
    width:120px;
    height:24px;
    padding:5px 6px 3px;
    border-radius:16px;
    border:2px solid #ccc;
    
    font-weight:800;
    color:#ccc;
    text-shadow:rgba(10,10,10,0.5) 1px 2px 2px;
    text-align:center;
    vertical-align:middle;
    overflow:hidden;
    
    /*------*/
    background-color:rgba(60,132,198,0.8);
    border-top-color:#8ba2c1;
    border-right-color:#5890bf;
    border-bottom-color:#4f93ca;
    border-left-color:#768fa5;
    
    box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;
    
  }
  
    .btn-aqua:hover{
      color:#000;
      text-shadow:rgb(255,255,255) 0px 0px 5px;
      top:1px;
      
    }
  
  .btn-aqua .blaze{
   position:absolute;
   top:0;
   left:5px;
   border-radius:8px;
   height:10px;
   width:123px;
   padding:8px 0px;
   background-color:rgba(225,255,255.0.75);
  }