Tailwind CSS - Calculating Briks to be used in pavering

1-readme.md

This is a fun project done to calculate how much can be fit into plane.

See it in action here https://play.tailwindcss.com/Y4gksQ1bCm

briks.html

  <div class="ml-10  text-white w-[680.31496063px] inline-flex items-center  h-5 my-5 justify-center border-x-2 border-white">
    <hr class="w-full h-px bg-gray-200 border-0">
    <span class="absolute -translate-x-1/2 text-xs text-black bg-white p-1 rounded">180 cm</span>
    </div>
</div>
<div class="flex ml-10 mb-10">
  <div class="flex flex-wrap border bg-red-950 text-white w-[680.31496063px] h-[831.49606299px] [&_>div]:bg-gray-400 [&_>div:hover]:bg-red-800">
    <div class="w-[79.37007874px] h-[52.913385827px] border">1</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">2</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">3</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">4</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">5</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">6</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">7</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">8</div>
    <div class="w-[43.38281px] h-[52.913385827px] border">9</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">10</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">11</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">12</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">13</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">14</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">15</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">16</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">17</div>
    <div class="w-[43.38px] h-[52.913385827px] border">18</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">19</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">20</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">21</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">22</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">23</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">24</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">25</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">26</div>
    <div class="w-[43.38px] h-[52.913385827px] border">27</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">28</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">29</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">30</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">31</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">32</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">33</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">34</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">35</div>
    <div class="w-[43.38px] h-[52.913385827px] border">36</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">37</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">38</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">39</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">40</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">41</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">42</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">43</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">44</div>
    <div class="w-[43.38px] h-[52.913385827px] border">45</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">46</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">47</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">48</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">49</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">50</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">51</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">52</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">53</div>
    <div class="w-[43.38px] h-[52.913385827px] border">54</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">55</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">56</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">57</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">58</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">59</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">60</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">61</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">62</div>
    <div class="w-[43.38px] h-[52.913385827px] border">63</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">64</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">65</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">66</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">67</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">68</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">69</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">70</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">71</div>
    <div class="w-[43.38px] h-[52.913385827px] border">72</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">73</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">74</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">75</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">76</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">77</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">78</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">79</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">80</div>
    <div class="w-[43.38px] h-[52.913385827px] border">81</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">82</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">83</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">84</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">85</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">86</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">87</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">88</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">89</div>
    <div class="w-[43.38px] h-[52.913385827px] border">90</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">91</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">92</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">93</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">94</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">95</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">96</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">97</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">98</div>
    <div class="w-[43.38px] h-[52.913385827px] border">99</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">100</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">101</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">102</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">103</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">104</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">105</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">106</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">107</div>
    <div class="w-[43.38px] h-[52.913385827px] border">108</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">109</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">110</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">111</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">112</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">113</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">114</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">115</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">116</div>
    <div class="w-[43.38px] h-[52.913385827px] border">117</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">118</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">119</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">120</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">121</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">122</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">123</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">124</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">125</div>
    <div class="w-[43.38px] h-[52.913385827px] border">126</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">127</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">128</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">129</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">130</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">131</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">132</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">133</div>
    <div class="w-[79.37007874px] h-[52.913385827px] border">134</div>
    <div class="w-[43.38px] h-[52.913385827px] border">135</div>
  </div>
  <div class=" text-white h-[831.49606299px] inline-flex items-center mx-7 justify-center border-y w-5">
      <hr class="h-full w-px bg-gray-200 border-0">
      <span class="absolute -translate-x-1 text-xs text-black bg-white p-1 rounded">220 cm</span>
      </div>
  </div>
</div>

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
}

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: saddlebrown;
}