JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<!-- div[class=box]*20>h2{$}+div>ul>li{$}*10 -->
<div class="box">
  <h2>1</h2>
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<div class="box">
  <h2>2</h2>
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<div class="box">
  <h2>3</h2>
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<div class="box">
  <h2>4</h2>
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<div class="box">
  <h2>5</h2>
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<div class="box">
  <h2>6</h2>
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<div class="box">
  <h2>7</h2>
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<div class="box">
  <h2>8</h2>
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
     ...

SCSS

.box{
  width: 100px;
  height:100px;
  text-align: center;
   h2{
     line-height:100px
   }
   float:left;
   display:inline-block;
   overflow:hidden;
   .content {
     display:none;
   }
}