JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Own framework</h1>
<table class="swot">
<tr class="inner-factors">
<td class="strengths">
<ul>
<li>Controlled core</li>
<li>Only the features really needed</li>
<li>"Like fish in the water" feel to it.</li>
</ul>
</td>
<td class="weaknesses">
<ul>
<li>Not popular in dev ppls world</li>
<li>Not to many features by default</li>
</ul>
</td>
</tr>
<tr class="outer-factors">
<td class="opportunities"></td>
<td class="threats"></td>
</tr>
</table>
CSS
*
{
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 12px;
}
h1
{
font-size: 2em;
text-align: center;
}
body
{
font-family: sans-serif;
}
ul
{
margin: 0;
padding: 0;
margin-left: 1em;
list-style-type: square;
}
.swot
{
width: 98%;
margin: 1%;
border-collapse: collapse;
}
.strengths, .weaknesses, .opportunities, .threats
{
width: 50%;
position: relative;
padding: 1em;
border: solid 1px black;
}
.strengths:after, .weaknesses:after, .opportunities:after, .threats:after
{
text-transform: uppercase;
position: absolute;
top: 0.2em;
right: 0.2em;
font-size: 0.8em;
}
.strengths
{
background-color: #cfc;
}
.strengths:after
{
content: "Strengths";
}
.weaknesses
{
background-color: #ffc;
}
.weaknesses:after
{
content: "Weaknesses";
}
.opportunities
{
background-color: #ccf;
}
.opportunities:after
{
content: "Opportunities";
}
.threats
{
background-color: #fcc;
}
.threats:after
{
content: "Threats";
}
JavaScript
/* FYA */
var cells = document.getElementsByTagName('td');
var tallest;
for (var c = 0; c < cells.length; c++)
{
var cell = cells[c];
if (!tallest)
{
tallest = cell;
}
if (tallest !== cell && cell.clientHeight > tallest.clientHeight)
{
tallest = cell;
}
}
/** WHAAAT */
$(function() {
$( "#togetherjs-dock" ).draggable();
});