JSFiddle - React, Tailwind, and code Playground

by shru90

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="github.css">
    <style>
    </style>
</head>
<body>
    <div id="initial">
    <label id="label">Label name</label>
<div id="legend"><svg><g class="legendCells" transform="translate(0,0)"><rect height="22" width="22" style="stroke: black; stroke-width: 1px; fill: rgb(255, 13, 186);"></rect><text x="26" y="16" style="fill: rgb(111, 111, 111);">Label 1</text></g><g class="legendCells" transform="translate(0,26)"><rect height="22" width="22" style="stroke: black; stroke-width: 1px; fill: rgb(255, 64, 53);"></rect><text x="26" y="16" style="fill: rgb(111, 111, 111);">Label 2</text></g><g class="legendCells" transform="translate(0,52)"><rect height="22" width="22" style="stroke: black; stroke-width: 1px; fill: rgb(247, 255, 164);"></rect><text x="26" y="16" style="fill: rgb(111, 111, 111);">Label 3</text></g><g class="legendCells" transform="translate(0,78)"><rect height="22" width="22" style="stroke: black; stroke-width: 1px; fill: rgb(112, 255, 97);"></rect><text x="26" y="16" style="fill: rgb(111, 111, 111);">Label 4</text></g><g class="legendCells" transform="translate(0,104)"><rect height="22" width="22" style="stroke: black; stroke-width: 1px; fill: rgb(9, 254, 133);"></rect><text x="26" y="16" style="fill: rgb(111, 111, 111);">Label 5</text></g><g class="legendCells" transform="translate(0,130)"><rect height="22" width="22" style="stroke: black; stroke-width: 1px; fill: rgb(254, 4, 135);"></rect><text x="26" y="16" style="fill: rgb(111, 111, 111);">Label 6</text></g><g class="legendCells" transform="translate(0,156)"><rect height="22" width="22" style="stroke: black; stroke-width: 1px; fill: rgb(255, 5, 94);"></rect><text x="26" y="16" style="fill: rgb(111, 111, 111);">Label 7</text></g><g...

CSS

#initial{
  display: block;
  min-width: 100px;
  min-height: 200px;
}
#initial{
  position: absolute;
  right: 16;
  top: 10;
  background-color: red;
  border-radius: 5px;
  padding: 10px;
}
#label{
  color:#6F6F6F;
}
#legend{
  display: flex;
  min-height: 200px;
  min-width: 100px;
  background-color: black;
  color: aliceblue;
  margin:0 auto;
}
svg {
  overflow:visible
}