JSFiddle - React, Tailwind, and code Playground

HTML

\
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="mainContainer">


    <div class="content">

  

        <ul class='list-group'>
            <li class='list-group-item'>x</li>
            <li class='list-group-item'>x</li>
            <li class='list-group-item'>x</li>
            <!--try to add more li and see what happens-->
        </ul>


    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}


body {
    -webkit-font-smoothing: antialiased;
    font-family: Raleway;
}

.mainContainer {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    min-height: 350px;
    width: 300px;
    border-radius: 5px;
    background: #f2f2f2;
    border: 1px #ccc solid;
}

.list-group-item {
  height: 100px;
}