JSFiddle - React, Tailwind, and code Playground

by Marie Gérard

HTML

<!doctype html>
<html lang="en">
    <head>
    <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Stepper</title>
    </head>
    <body class="container">
        <div class="row">
            <div class="col-12 stepperBloc d-table w-100 p-0">
                <div class="stepper active d-table-cell position-relative">
                    <div class="item"><span>1</span></div>
                    <div class="text">Formulaire</div>
                    <div class="bar-right"></div>
                </div>
                <div class="stepper d-table-cell position-relative">
                    <div class="item"><span>2</span></div>
                    <div class="text">Pièces jointes</div>
                    <div class="bar-left"></div>
                    <div class="bar-right"></div>
                </div>
                <div class="stepper d-table-cell position-relative">
                    <div class="item"><span><i class="fas fa-paper-plane fa-2x"></i></span></div>
                    <div class="text">Demande validée</div>
                    <div class="bar-left"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 stepperBloc d-table w-100 p-0">
                <div...

CSS

.stepperBloc { margin:0 auto; background-color:#FFFFFF; font-family: 'Open Sans', sans-serif; font-size: 14px;}
.stepperBloc .stepper { padding: 15px; vertical-align: middle; white-space: nowrap;}
.stepperBloc .stepper { max-width: 100px; }
.stepperBloc .stepper:first-child .md-step-bar-left, .stepperBloc .stepper:last-child .md-step-bar-right { display:none;}

.stepperBloc .stepper .item { width:35px; height:35px; margin:0 auto; background-color:#C9C9C9; border-radius: 50%;
    text-align: center; line-height:34px; font-size: 14px; font-weight: 400; color:#FFFFFF;}
.stepperBloc .stepper:last-child .item { border: none; background-color: #FFF;  -webkit-transform: rotate(9deg); transform: rotate(9deg); }
.stepperBloc .stepper:last-child .item span { color: #C9C9C9; }

.stepperBloc .stepper.active .item { border: 5px solid #0A6098; background-color: #FFF; color: #0A6098; line-height: 24px;}
.stepperBloc .stepper .text { margin-top:16px; font-size:14px; font-weight:400; text-align: center; color: #C9C9C9; margin-top: 5px; margin-left: -15px;}
.stepperBloc .stepper:first-child .text{ margin-left: 0px; }
@media only screen and (min-width: 475px){
    .stepperBloc .stepper .text { margin-left: 0px; }
}
.stepperBloc .stepper.active .text { color: #0A6098; font-weight: 600;}
.stepperBloc .stepper.active .item span { font-weight: 700; }
.stepperBloc .stepper.valid .item { border: 5px solid #6EDE6F; background-color: #FFF; color: #6EDE6F; line-height: 24px;}
.stepperBloc .stepper.valid .text { color: #6EDE6F; font-weight: 600;}
.stepperBloc .stepper.valid:last-child .item{ border:  none;}
.stepperBloc .stepper.valid:last-child .item span{ color: #6EDE6F; }
.stepperBloc .stepper .bar-left,
.stepperBloc .stepper .bar-right { position:absolute; top:32px; height:1px; border-top:2px solid #C9C9C9;}

.stepperBloc .stepper:first-child .bar-right,
.stepperBloc .stepper:nth-child(2) .bar-left { border-top: 2px dashed #C9C9C9; }

.stepperBloc.valid .bar-right,
.stepperBloc.valid...