Level 3
Have you thought about using D3js to generate the chart as an SVG?
Aug 26, 2022
1
Level 8
Building a Seating Chart
I'm attempting to build a seating chart design using Tailwind CSS. It should look similar to the image below but instead its all over that place. I've tried changing it around but not having any luck. I suspect there would be a better way to build this and open to suggestions on how to fix it and build it better.
Should be this:
Looks like this when 1/2 browser:
Looks like this when full browser:
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Event</title>
</head>
<!-- styles --->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<body class="bg-[#333333]">
<main>
<!-- start 33-37 -->
<div class="flex flex-col items-center justify-center">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">33</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">34</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">35</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">36</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">37</div>
</div>
</div>
<div class="flex flex-row">
<div class="bg-[#989898] rounded-xl border-4 border-white h-[72px] w-[500px]"></div>
</div>
</div>
<!-- end 33-37 -->
<!-- start 13-18 -->
<div class="flex flex-row items-center justify-center space-x-2 mt-20">
<div class="flex flex-col items-center justify-center">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">13</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">14</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">15</div>
</div>
</div>
<div class="flex flex-row">
<div class="bg-[#767676] rounded-xl h-[72px] w-80"></div>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">16</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">17</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">18</div>
</div>
</div>
<div class="flex flex-row">
<div class="bg-[#767676] rounded-xl h-[72px] w-80"></div>
</div>
</div>
</div>
<!-- end 13-18 -->
<!-- start 13-14 | 19-20 -->
<div class="flex flex-row items-center justify-center space-x-2 space-x-[690px]">
<div class="flex flex-col items-center justify-center -rotate-45">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#F4315B] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">13</div>
</div>
<div class="flex bg-[#F4315B] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">14</div>
</div>
</div>
<div class="flex flex-row">
<div class="bg-[#767676] rounded-xl h-[72px] w-60"></div>
</div>
</div>
<div class="flex flex-col items-center justify-center rotate-45">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">16</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">17</div>
</div>
</div>
<div class="flex flex-row">
<div class="bg-[#767676] rounded-xl h-[72px] w-60"></div>
</div>
</div>
</div>
<!-- end 13-14 | 19-20 -->
<!-- start 8-10 & 21-23 -->
<div class="flex flex-row items-center pl-[135px] pt-10">
<div class="flex flex-flex items-center space-x-3 pr-40">
<div class="flex bg-[#F4315B] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">31</div>
</div>
<div class="flex flex-col items-center justify-center space-y-3">
<div class="flex bg-[#F4315B] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">32</div>
</div>
<div class="flex flex-row">
<div class="bg-[#989898] rounded-xl border-4 border-white h-64 w-64"></div>
</div>
<div class="flex bg-[#F4315B] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">30</div>
</div>
</div>
</div>
<div class="flex flex-col items-center -rotate-90">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">8</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">9</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">10</div>
</div>
</div>
<div class="flex">
<div class="bg-[#767676] rounded-xl h-[72px] w-80"></div>
</div>
</div>
<div class="flex">
<div class="w-[825px]"></div>
</div>
<div class="flex flex-col items-center rotate-90">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">16</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">17</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">18</div>
</div>
</div>
<div class="flex">
<div class="bg-[#767676] rounded-xl h-[72px] w-80"></div>
</div>
</div>
<div class="flex flex-col items-center justify-center rotate-90">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">38</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">39</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">40</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">41</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">42</div>
</div>
</div>
<div class="flex flex-row">
<div class="bg-[#989898] rounded-xl border-4 border-white h-[72px] w-[500px]"></div>
</div>
</div>
</div>
<!-- end 8-10 & 21-23 -->
<!-- start 5-7 & 24-26 -->
<div class="flex flex-row items-center pl-[135px] pt-10">
<div class="flex flex-flex items-center space-x-3 pr-40">
<div class="flex bg-[#F4315B] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">28</div>
</div>
<div class="flex flex-col items-center justify-center space-y-3">
<div class="flex bg-[#F4315B] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">29</div>
</div>
<div class="flex flex-row">
<div class="bg-[#989898] rounded-xl border-4 border-white h-64 w-64"></div>
</div>
<div class="flex bg-[#F4315B] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">27</div>
</div>
</div>
</div>
<div class="flex flex-col items-center -rotate-90">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">5</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">6</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">7</div>
</div>
</div>
<div class="flex">
<div class="bg-[#767676] rounded-xl h-[72px] w-80"></div>
</div>
</div>
<div class="flex">
<div class="w-[825px]"></div>
</div>
<div class="flex flex-col items-center rotate-90">
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">16</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">17</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">18</div>
</div>
</div>
<div class="flex">
<div class="bg-[#767676] rounded-xl h-[72px] w-80"></div>
</div>
</div>
<div class="flex flex-flex items-center justify-center space-x-3 mt-60 rotate-45">
<div class="flex flex-col items-center justify-center space-y-3">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">43</div>
</div>
<div class="flex">
<div class="bg-[#989898] rounded-xl border-4 border-white h-64 w-64"></div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">45</div>
</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">44</div>
</div>
</div>
</div>
<!-- end 5-7 & 24-26 -->
<!-- start 3-2 & 1-2 -->
<div class="flex flex-row items-center justify-center space-x-[550px] mt-24">
<div class="flex flex-col items-center justify-center">
<div class="flex flex-row">
<div class="bg-[#767676] rounded-xl h-[72px] w-60"></div>
</div>
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">3</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">4</div>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<div class="flex flex-row">
<div class="bg-[#767676] rounded-xl h-[72px] w-60"></div>
</div>
<div class="flex flex-row space-x-2 my-2">
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">1</div>
</div>
<div class="flex bg-[#32E033] items-center justify-center rounded-full hover hover:bg-gray-100 w-20 h-20">
<div class="text-black text-4xl">2</div>
</div>
</div>
</div>
</div>
<!-- end 3-2 & 1-2 -->
</main>
</body>
</html>
Please or to participate in this conversation.