JSFiddle - React, Tailwind, and code Playground

by siyakunde

HTML

<div id="container">
        <div class="simpleTabs">
            <ul class="simpleTabsNavigation">
                <li>
                    <button class="current" 
                    type="button">One</button>
                </li>
                <br/>
                <li>
                    <button type="button">Two</button>
                </li>
                <br/>
                <li>
                    <button type="button">Three</button>
                </li>
                <br/>
            </ul>
        </div> <!-- simpleTabs -->

    
    <div id="msg" class="simpleTabsContent">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        <br/>
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        <br/>
        cccccccccccccccccccccccccccccccccccccccccccc
        <br/>
        dddddddddddddddddddddddddddddddddddddddddddd
    </div>
</div>

CSS

div.simpleTabs { width: 90px;float:left;padding-right: 3px; }

ul.simpleTabsNavigation { margin: 10px -1px 0 0; padding:0; text-align:left;}

ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; }

ul.simpleTabsNavigation li button { 
    margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D; 
    padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold; 
    text-decoration:none; font-family: Verdana; }

ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }

ul.simpleTabsNavigation li button.current { 
    background:#ffffff; color:#6da69d; border-right:1px solid #ffffff;}

div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; }

#msg{float:left;  width:350px;  padding: 5px 10px;  margin-top:10px;}

#container{ margin: 0; width: 500px; position: relative;
}