JSFiddle - React, Tailwind, and code Playground

by gabigbe

HTML

<div class="scroll">
  <div class="row">
        <!--coluna 1-->

        <!--título do gráfico-->
        <div class="col grid text-center selected">
         <h4><span class="selected">NOME DO GRÁFICO</span></h4>

          <!--filtrar gráficos por datas-->

          <div class="filter justify-content-center align-content-center">
             <span> <b>FILTRAR DE</b> &nbsp; </span> 
             <input type="date" class="form-control date"/> 
             <span> <b> &nbsp; ATÉ &nbsp;</b> </span> 
             <input type="date" class="form-control date"/>
          </div>

          <!--descrição dos gráficos-->

          <div>
            <span class="descriptons">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue orci a
              egestas vestibulum. Aliquam laoreet quis lacus vel pellentesque.</span>
          </div>
        </div>
</div>

CSS

div > span{
    color: var(--cor-branca);
    font-family: var(--fonte-light);
    text-align: justify;
    font-size: 100%;
    letter-spacing: 1px;
}

h4 > span{
    font-family: var(--fonte-regular);
    color: var(--cor-branca);
}

div > b{
    color: var(--cor-branca);
    font-family: var(--fonte-regular);
}

.grid{
    width: 100%;
    height: 100%;
    border-style: solid;
    border-radius: 2px;
    border-width: 2px;
    border-color: #a8a8a8;
    padding: 10px;
    margin: 15px;
}

.filter{
    display:flex;
    flex-wrap: nowrap;
    margin: 10px;
    align-items: center;
    width: 95%;
}

.selected{
    border-color: var(--cor-amarelo) !important;
    color: var(--cor-amarelo) !important;
}

/*scrollbar*/
::-webkit-scrollbar {
    width: 5px;
  }
  
  /*caminho*/
  ::-webkit-scrollbar-track {
    background: #3d3d3d; 
  }
  
  /*barrinha*/
  ::-webkit-scrollbar-thumb {
    background: #666666; 
    border-radius: 50px;
  }
  
.scroll{
    overflow: hidden;
}

.scroll:hover{
    overflow-y: scroll;
}