JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<div class="buttons flex">
        <button>Reddit</button>
        <button>G+</button>
        <button>Facebook</button>
        <button>Stack Exchange</button>
        <button>Twitter</button>
        <button>Steam</button>
</div>
        
<div class="buttons">
        <button>Reddit</button>
        <button>G+</button>
        <button>Facebook</button>
        <button>Stack Exchange</button>
        <button>Twitter</button>
        <button>Steam</button>
</div>

CSS

.buttons {
    margin: 20%;
    width: 60%;
    text-align: center;
    background: #bada55;
    padding: 10px;
}
.buttons.flex
{
   display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around ; 
    align-content: space-around;
    
}

.flex button {
   flex: 0 1 auto;
   align-items: center; 
}