JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<ul class="skills-list">
    <li>
        <h2>skill 1</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill2</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill 3</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill 4</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill 5</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill 6</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill 7</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill 8</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill 9</h2>
        <ul class="skills-list-block"></ul>
    </li>
    <li>
        <h2>skill 10</h2>
        <ul class="skills-list-block"></ul>
    </li>
</ul>

CSS

*{
  list-style-type:none;
  box-sizing: border-box;
}

body{
  background-color: blue;
}

.skills-list{
    padding:15px 0;
    max-width:600px;
}

.skills-list li{
    padding:5px;
    width:50%;
    float:left
}

.skills-list h2{
    margin:10px 0 20px;
    color:#FFF;
    font-size:24px
}

.skills-list .skills-list-block{
    height:40px;
    width:100%;
    max-width:400px;
    background-color:#CCC;
}