JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div class="button">
    <div class="buttonTop">
        <div class="buttonTopLeft buttonCorner"></div>
        <!--<div class="buttonTopCenter"></div>-->
        <div class="buttonTopRight buttonCorner"></div>
    </div>
    <div class="buttonMiddle">
        <div class="buttonMiddleLeft"></div>
        <!--<div class="buttonMiddleCenter"></div>-->
        <div class="buttonMiddleRight"></div>
        lots of words<br/> and even more words
    </div>
    <div class="buttonBottom">
        <div class="buttonBottomLeft buttonCorner"></div>
        <!--<div class="buttonBottomCenter"></div>-->
        <div class="buttonBottomRight buttonCorner"></div>
    </div>
</div>

CSS

body{margin:20px;}
.button
{
    
    min-width:30px;
    min-height:30px;
}
    div{margin:0; padding:0;}
    .buttonCorner
    {
        position:absolute;
        width:10px;
        height:10px;
        border:1px solid gray;
    }
    .buttonTop
    {
        position:relative;
        width:100%;
        height:10px;
    }
        .buttonTopLeft
        {
            top:0;
            left:0;
        }
        .buttonTopRight
        {
            top:0;
            right:0;
        }
    .buttonMiddle
    {
        position:relative;
        width:100%;
        padding:0 10px;
    }
        .buttonMiddleLeft
        {
            position:absolute;
            top:0;
            left:0;
            height:100%;
            width:10px;
        }
        .buttonMiddleCenter
        {
            width:100%;
            min-height:10px;
        }
        .buttonMiddleRight
        {
            position:absolute;
            top:0;
            right:0;
            height:100%;
            width:10px;
            
        }
    .buttonBottom
    {
       position:relative;
        width:100%;
        height:10px;
    }
        .buttonBottomLeft
        {
            top:0;
            left:0;
        }
        .buttonBottomRight
        {
            top:0;
            right:0;

        }