JSFiddle - React, Tailwind, and code Playground

by jrdiaz

HTML

<html>
    <head>
    </head>
    <body>
        
    <div class="steps">    
    
        <div class="sep completed"><div class="completed"></div></div>
        <div class="completed">Paso1</div>
        
        <div class="sep current"><div class="completed"></div></div>
        <div class="current">Paso2</div>
        
        <div class="sep"><div class="current"></div></div>        
        <div class="">Paso3</div>
    </div>
       
       
       
       
       
       
       
    <div style="width: 300px; border: 1px solid red; border-bottom: 0; overflow: hidden; ">
        <div style="
            width:100%; 
            border-bottom: 1px solid red;"> Div 1</div>            
        <div style="text-align: center; width: 100%; margin-left: -20px; ">
             <div style="
                margin-left:50%;
                padding-left: -10px;
                border-top:  10px solid red;
                border-left: 20px solid #f6f6f6;
                border-right: 20px  solid  #f6f6f6;
                font-size: 0px; 
               line-height: 0%; 
               width: 0px;"></div>
        </div>
       
        <div style="width:100%; border-bottom: 1px solid red"> Div 2</div>
 
     
    </div>
 
    </body>
</html>

CSS

/*
 *  Classes
 *      N/A              - Uncompleted step. Greyed by default
 *      end              - Last uncompleted step. Greyed and no "arrow". Modern browsers just need "last" class instead of end.
 *       last             - Boundary class. Marks last completed step and  last step. Used only by modern browsers (the ones with the ability of  interpret multiple classes for one element)
 *      current          - Current step
 *      completed        - Completed step. Lighter color
 *      completedLast    - Last completed step. Older browsers compatibility. Modern browsers just need "last completed" classes
 *       completedLastEnd - Last step when all steps are completed. Older  browsers compatibility. Modern browsers just need "last completed"  classes
*/
.steps { width: 300px; border: 2px solid white; overflow: hidden; }
  .steps div { background-color: #EBEBEB; width:100%; border-bottom: 0; padding: 5px;  } /* Para todos los divs */
  .steps .sep { margin-left: -40px; width: 340px; padding: 0;  }
    .steps .sep div { 
      margin-left:50%;
      
      border-top:   10px solid black;
      border-right: 20px solid #EBEBEB;
      border-left:  20px solid #EBEBEB;
    
      border-bottom: 0; padding: 0; font-size: 0px; line-height: 0%; width: 0px;
      
    }

/* Contenidos */
.steps .current   { background-color: #6699CC; border-color: #6699CC; }
.steps .completed { background-color: #3366CC; border-color: #3366CC; }

/* Separadores */
.steps .sep .completed { border-top-color: #6699CC; }
.steps .sep .current   { background-color: #3366CC; }

/* Flechas */
.steps .sep .completed           { border-top-color: #3366CC; border-left-color: #6699CC; border-right-color: #6699CC; }
.steps .sep .current             { border-top-color: #6699CC; border-left-color: #EBEBEB; border-right-color: #EBEBEB; }
.steps .sep.completed .completed { border-top-color: #3366CC; border-left-color: #3366CC; border-right-color: #3366CC; }
.steps .sep.current .current     {...