JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<ul class="responsive-table head">

  <li class="responsive-item" title="Start">Start</li>
  <li class="responsive-item" title="Column1">Column1</li>
  <li class="responsive-item" title="Column2">Column2</li>
  <li class="responsive-item" title="Column3">Column3</li>
  <li class="responsive-item" title="End">End</li>


</ul>

<ul class="responsive-table body">

  <li class="responsive-item" title="Start">Some text</li>
  <li class="responsive-item" title="Column1">John</li>
  <li class="responsive-item" title="Column2">Doe</li>
  <li class="responsive-item" title="Column3">Designer</li>
  <li class="responsive-item" title="End">Happy</li>


</ul>

<ul class="responsive-table body">

  <li class="responsive-item" title="Start">Some text</li>
  <li class="responsive-item" title="Column1">Alexandru</li>
  <li class="responsive-item" title="Column2">Gatea</li>
  <li class="responsive-item" title="Column3">Designer</li>
  <li class="responsive-item" title="End">Happy</li>


</ul>

<ul class="responsive-table body">

  <li class="responsive-item" title="Start">Some text</li>
  <li class="responsive-item" title="Column1">Alexandru</li>
  <li class="responsive-item" title="Column2">Gatea</li>
  <li class="responsive-item" title="Column3">Designer</li>
  <li class="responsive-item" title="End">Happy</li>


</ul>

SCSS

* {box-sizing: borer-box};

body {
    @media (max-width:767px) {
      
        display: flex; 
        flex-wrap:wrap;
    }

  
  
}  

.responsive{
  
    &-table {
      
        display: flex;
      
    }
    
    &-item {
      
        width: 20%;
        padding: 1rem;
      
    }
  
}

.head {
  
    background: black;
    @media (max-width:767px) {
      
        display: none;
      
    }
    
    li {
      
        color: white;
      
    }
  
}

.body {
  
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    
    @media (max-width:767px) {
      
        display: inline-flex;
        margin-right:20px;
        flex-direction: column;
        border: 1px solid #ccc;
        width: 250px;
        margin: 20px;
        flex-grow: 1;
        
        .responsive-item {
          
          width: 100%;
            
            &:before {
              
              content: attr(title) ": ";
              font-weight: bold;
              min-width: 100px;
              display: inline-block;
            }
          
        }
      
    }
  
}