JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<h1>+ Нормолайз</h1>
<table>
   <tr>
       <td></td>
       <td style="width:10px;"><div class="flag left-top"></div></td>
       <td style="background-color:red"><div class="flag"></div></td>
       <td style="width:10px;"><div class="flag right-top"></div></td>
       <td></td>
   <tr>
   <tr>
       <td style="border: 1px solid gray;border-right: none;padding: 5px;">0000000</td>
       <td style="width:10px;background-color:red"></td>
       <td style="border-bottom: 1px solid gray;padding: 5px;">00000000</td>
       <td style="width:10px;background-color:red"></td>
       <td style="border: 1px solid gray;border-left: none;padding: 5px;">00000000</td>
   <tr>
   <tr>
       <td style="border: 1px solid gray;border-right: none;padding: 5px;">0000000000</td>
       <td style="width:10px;background-color:red"></td>
       <td>000000000</td>
       <td style="width:10px;background-color:red"></td>
       <td style="border: 1px solid gray;border-left: none;padding: 5px;">00000000</td>
   <tr>
   <tr>
       <td style="border: 1px solid gray;border-right: none;padding: 5px;">00000000</td>
       <td style="width:10px;background-color:red"></td>
       <td style="border-top: 1px solid gray;padding: 5px;">00000000</td>
       <td style="width:10px;background-color:red"></td>
       <td style="border: 1px solid gray;border-left: none;padding: 5px;">000000000</td>
   <tr>
   <tr>
       <td></td>
       <td style="width:10px;"><div class="flag left-bottom"></div></td>
       <td style="width:10px;background-color:red"><div class="flag"></div></td>
       <td style="width:10px;"><div class="flag right-bottom"></div></td>
       <td></td>
   <tr>
<table>

CSS

.flag{
    width: 10px;
    height: 10px;
    background-color: red;
}

.left-top{
    border-radius: 100% 0 0;
}
.right-top {
    border-radius: 0 100% 0 0;
}
.right-bottom {
    border-radius: 0 0 100%;
}
.left-bottom{
   border-radius: 0 0 0 100%;
}