JSFiddle - React, Tailwind, and code Playground

by marcelow

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        /* basic styling */
        width: 350px;
        height: 95px;
        border: 1px solid #555;
        font: 14px Arial;
      
        /* flexbox setup */
        display: -webkit-box;
        -webkit-box-orient: horizontal;
      
        display: -moz-box;
        -moz-box-orient: horizontal;
      
        display: box;
        box-orient: horizontal;
      }
      
      .box > div {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
      
        -moz-transition: width 0.7s ease-out;
        -o-transition: width 0.7s ease-out;
        -webkit-transition: width 0.7s ease-out;
        transition: width 0.7s ease-out;
      }
      
      /* our colors */
      .box > div:nth-child(1){ background : #FCC; }
      .box > div:nth-child(2){ background : #CFC; }
      .box > div:nth-child(3){ background : #CCF; }
      
      .box > div:hover { 
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>un</div>
      <div>deux</div>
      <div>trois</div>
    </div>
  </body>
</html>

CSS

.box {
              /* basic styling */
              width: 350px;
              height: 95px;
              border: 1px solid #555;
              font: 14px Arial;
            
              /* flexbox setup */
              display: -webkit-box;
              -webkit-box-orient: horizontal;
            
              display: -moz-box;
              -moz-box-orient: horizontal;
            
              display: box;
              box-orient: horizontal;
            }
            
            .box > div {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              box-flex: 1;
            
              -moz-transition: width 0.7s ease-out;
              -o-transition: width 0.7s ease-out;
              -webkit-transition: width 0.7s ease-out;
              transition: width 0.7s ease-out;
            }
            
            /* our colors */
            .box > div:nth-child(1){ background : #FCC; }
            .box > div:nth-child(2){ background : #CFC; }
            .box > div:nth-child(3){ background : #CCF; }
            
            .box > div:hover { 
              width: 200px;
            }