JSFiddle - React, Tailwind, and code Playground

by rehan008

HTML

<table class="tbl">
    <tr>
        <td class="dt">
            <div class="shortcutContainer">
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
                </div>
                <div class="shortcut">
                    <div class="img"></div>
                    <div class="txt"><nobr>Hello World</nobr></div>
         ...

CSS

.shortcutContainer{
    border: 1px dotted green;
}

.img{
    display:text-top;
    height:38px;
    width:39px;
    margin:2px;
    border: 1px solid blue;
}

.shortcut{
    border: 1px solid red;
    height:65px;
    width:45px;
    display:inline-block;
    margin:5px;
}

.txt{
    font-size:12px;
    width:43px;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px dotted red;
}

.tbl{
    border:1px solid;
    height:100%;
    width:100%;
}

.dt{
    border:1px dotted;
    padding:5px;

}