JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<!--THIS IS HOW IT SHOULD WORK FOR WHEN THERE IS THREE BUTTONS-->
<article>
    <div class='btn-group'>
        <a class='button'>Test</a>
        <a class='button'>Test</a>
        <a class='button'>Test</a>
    </div>
</article>
<!--THIS WORKS TOO-->
<article>
    <div class='btn-group'>
        <a class='button'>Test</a>
        <a class='button'>Test</a>
    </div>
</article>
<!--THIS DOESN'T WORK, should have rounded borders-->
<article>
    <div class='btn-group'>
        <a class='button'>Test</a>
    </div>
</article>
<article>
    <div class='btn-group'>
        <a class='button'>Test</a>
    </div>
</article>

CSS

.btn-group{
  display:flex;
  
}
.btn-group .button {
  flex:0 0 auto;
  border-radius: 0;
}

.btn-group .button:first-child {
    border-radius: 4px 0 0 4px;
    margin-right:-1px;
}


.btn-group .button:last-child {
    border-radius: 0 6px 6px 0;
    margin-left: -1px;
}

.btn-group .button {
    padding: 10px;
    background: teal;
    border: 1px Black solid;
    color: #FFF;
}

article {
    padding: 10px;
    margin-bottom: 50px;
}

.btn-group .button:only-child {
    border-radius: 6px;
    margin-left: 0;
}