Home
Michael Andreuzza
Periodic Table with Tailwind CSS

Periodic Table with Tailwind CSS

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3.

2.4k

<section class="flex items-center justify-center relative overflow-hidden">
 <div class="relative items-center w-full px-5 py-12 mx-auto 2xl:max-w-7xl lg:py-12 text-xs">
  <div class="grid grid-cols-5 gap-6">
   <p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-red-50 border-red-200 border p-2 rounded-full flex"></span>
    Post-transition metals
   </p>
   <p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-purple-50 border-purple-200 border p-2 rounded-full flex"></span>Transition metals
   </p>
   <p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-lime-50 border-lime-200 border p-2 rounded-full flex"></span>Lanthanoids
   </p>
   <p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-indigo-50 border-indigo-200 border p-2 rounded-full flex"></span>Actinoids
   </p>
   <p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-red-50 border-red-200 border p-2 rounded-full flex"></span>Alkaline earth metals
   </p>
   <p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-cyan-50 border-cyan-200 border p-2 rounded-full flex"></span>Alkali metals
   </p>

<p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-pink-50 border-pink-200 border p-2 rounded-full flex"></span>Noble gases
   </p>
   <p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-blue-50 border-blue-200 border p-2 rounded-full flex"></span>Reactive nonmetals
   </p>

<p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-yellow-50 border-yellow-200 border p-2 rounded-full flex"></span>Metailoids
   </p>
   <p class="inline-flex items-center gap-2">
    <span class="w-4 h-4 bg-zinc-50 border-zinc-200 border p-2 rounded-full flex"></span>Unknown
   </p>
  </div>
  <div class="grid grid-cols-18 gap-1 mt-12">
   <div class="bg-blue-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-blue-500 hover:text-white duration-200 text-blue-500">
    <p>1</p>
    <p class="block text-center text-2xl font-medium font-mono">H</p>
    <p class="block text-center text-[0.55rem]">Hydrogen</p>
   </div>
   <div class="bg-pink-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-pink-500 hover:text-white duration-200 text-pink-700 col-start-18">
    <p>2</p>
    <p class="block text-center text-2xl font-medium font-mono">He</p>
    <p class="block text-center text-[0.55rem]">Helium</p>
   </div>
   <div class="bg-cyan-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-cyan-500 hover:text-white duration-200 text-cyan-600">
    <p>3</p>
    <p class="block text-center text-2xl font-medium font-mono">Li</p>
    <p class="block text-center text-[0.55rem]">Lithium</p>
   </div>
   <div class="bg-red-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-red-500 hover:text-white duration-200 text-red-500">
    <p>5</p>
    <p class="block text-center text-2xl font-medium font-mono">Be</p>
    <p class="block text-center text-[0.55rem]">Beryllium</p>
   </div>
   <div class="bg-yellow-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-yellow-500 hover:text-white duration-200 text-yellow-700 col-start-13">
    <p>6</p>
    <p class="block text-center text-2xl font-medium font-mono">B</p>
    <p class="block text-center text-[0.55rem]">Boron</p>
   </div>
   <div class="bg-blue-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-blue-500 hover:text-white duration-200 text-blue-500">
    <p>7</p>
    <p class="block text-center text-2xl font-medium font-mono">C</p>
    <p class="block text-center text-[0.55rem]">Carbon</p>
   </div>
   <div class="bg-blue-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-blue-500 hover:text-white duration-200 text-blue-500">
    <p>8</p>
    <p class="block text-center text-2xl font-medium font-mono">N</p>
    <p class="block text-center text-[0.55rem]">Nitrogen</p>
   </div>
   <div class="bg-blue-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-blue-500 hover:text-white duration-200 text-blue-500">
    <p>9</p>
    <p class="block text-center text-2xl font-medium font-mono">O</p>
    <p class="block text-center text-[0.55rem]">Oxigen</p>
   </div>
   <div class="bg-sky-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-sky-500 hover:text-white duration-200 text-sky-700">
    <p>10</p>
    <p class="block text-center text-2xl font-medium font-mono">F</p>
    <p class="block text-center text-[0.55rem]">Fluorine</p>
   </div>
   <div class="bg-pink-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-pink-500 hover:text-white duration-200 text-pink-700">
    <p>9</p>
    <p class="block text-center text-2xl font-medium font-mono">Ne</p>
    <p class="block text-center text-[0.55rem]">Neon</p>
   </div>
   <div class="bg-cyan-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-cyan-500 hover:text-white duration-200 text-cyan-600">
    <p>11</p>
    <p class="block text-center text-2xl font-medium font-mono">So</p>
    <p class="block text-center text-[0.55rem]">Sodium</p>
   </div>
   <div class="bg-red-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-red-500 hover:text-white duration-200 text-red-500">
    <p>12</p>
    <p class="block text-center text-2xl font-medium font-mono">Mg</p>
    <p class="block text-center text-[0.55rem]">Magnesium</p>
   </div>
   <div class="bg-green-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-green-500 hover:text-white duration-200 text-green-800 col-start-13">
    <p>13</p>
    <p class="block text-center text-2xl font-medium font-mono">Al</p>
    <p class="block text-center text-[0.55rem]">Aluminium</p>
   </div>
   <div class="bg-yellow-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-yellow-500 hover:text-white duration-200 text-yellow-700">
    <p>14</p>
    <p class="block text-center text-2xl font-medium font-mono">Si</p>
    <p class="block text-center text-[0.55rem]">silicon</p>
   </div>
   <div class="bg-blue-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-blue-500 hover:text-white duration-200 text-blue-500">
    <p>15</p>
    <p class="block text-center text-2xl font-medium font-mono">P</p>
    <p class="block text-center text-[0.55rem]">Phosphorus</p>
   </div>
   <div class="bg-blue-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-blue-500 hover:text-white duration-200 text-blue-500">
    <p>16</p>
    <p class="block text-center text-2xl font-medium font-mono">S</p>
    <p class="block text-center text-[0.55rem]">Sulfur</p>
   </div>
   <div class="bg-sky-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-sky-500 hover:text-white duration-200 text-sky-700">
    <p>17</p>
    <p class="block text-center text-2xl font-medium font-mono">Ci</p>
    <p class="block text-center text-[0.55rem]">Chlorine</p>
   </div>
   <div class="bg-pink-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-pink-500 hover:text-white duration-200 text-pink-700">
    <p>18</p>
    <p class="block text-center text-2xl font-medium font-mono">Ar</p>
    <p class="block text-center text-[0.55rem]">Argon</p>
   </div>
   <div class="bg-cyan-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-cyan-500 hover:text-white duration-200 text-cyan-600">
    <p>19</p>
    <p class="block text-center text-2xl font-medium font-mono">K</p>
    <p class="block text-center text-[0.55rem]">Potassium</p>
   </div>
   <div class="bg-red-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-red-500 hover:text-white duration-200 text-red-500">
    <p>20</p>
    <p class="block text-center text-2xl font-medium font-mono">Ca</p>
    <p class="block text-center text-[0.55rem]">Calcium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>21</p>
    <p class="block text-center text-2xl font-medium font-mono">Sc</p>
    <p class="block text-center text-[0.55rem]">Scandium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>22</p>
    <p class="block text-center text-2xl font-medium font-mono">Ti</p>
    <p class="block text-center text-[0.55rem]">Titanium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>23</p>
    <p class="block text-center text-2xl font-medium font-mono">V</p>
    <p class="block text-center text-[0.55rem]">Vanadium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>24</p>
    <p class="block text-center text-2xl font-medium font-mono">Cr</p>
    <p class="block text-center text-[0.55rem]">Chromium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>25</p>
    <p class="block text-center text-2xl font-medium font-mono">Mn</p>
    <p class="block text-center text-[0.55rem]">Managanese</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>26</p>
    <p class="block text-center text-2xl font-medium font-mono">Fe</p>
    <p class="block text-center text-[0.55rem]">Iron</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>27</p>
    <p class="block text-center text-2xl font-medium font-mono">Co</p>
    <p class="block text-center text-[0.55rem]">Cobalt</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>28</p>
    <p class="block text-center text-2xl font-medium font-mono">Ni</p>
    <p class="block text-center text-[0.55rem]">Nickle</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>29</p>
    <p class="block text-center text-2xl font-medium font-mono">Cu</p>
    <p class="block text-center text-[0.55rem]">Copper</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>30</p>
    <p class="block text-center text-2xl font-medium font-mono">Zn</p>
    <p class="block text-center text-[0.55rem]">Zinc</p>
   </div>
   <div class="bg-green-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-green-500 hover:text-white duration-200 text-green-800">
    <p>31</p>
    <p class="block text-center text-2xl font-medium font-mono">Ga</p>
    <p class="block text-center text-[0.55rem]">Gallium</p>
   </div>
   <div class="bg-yellow-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-yellow-500 hover:text-white duration-200 text-yellow-700">
    <p>32</p>
    <p class="block text-center text-2xl font-medium font-mono">Ge</p>
    <p class="block text-center text-[0.55rem]">Germanium</p>
   </div>
   <div class="bg-yellow-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-yellow-500 hover:text-white duration-200 text-yellow-700">
    <p>33</p>
    <p class="block text-center text-2xl font-medium font-mono">As</p>
    <p class="block text-center text-[0.55rem]">Arsenic</p>
   </div>
   <div class="bg-blue-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-blue-500 hover:text-white duration-200 text-blue-500">
    <p>34</p>
    <p class="block text-center text-2xl font-medium font-mono">Se</p>
    <p class="block text-center text-[0.55rem]">Selenium</p>
   </div>
   <div class="bg-sky-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-sky-500 hover:text-white duration-200 text-sky-700">
    <p>35</p>
    <p class="block text-center text-2xl font-medium font-mono">Br</p>
    <p class="block text-center text-[0.55rem]">Bromine</p>
   </div>
   <div class="bg-pink-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-pink-500 hover:text-white duration-200 text-pink-700">
    <p>36</p>
    <p class="block text-center text-2xl font-medium font-mono">Kr</p>
    <p class="block text-center text-[0.55rem]">Krypton</p>
   </div>
   <div class="bg-cyan-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-cyan-500 hover:text-white duration-200 text-cyan-600">
    <p>37</p>
    <p class="block text-center text-2xl font-medium font-mono">Rb</p>
    <p class="block text-center text-[0.55rem]">Rubidium</p>
   </div>
   <div class="bg-red-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-red-500 hover:text-white duration-200 text-red-500">
    <p>38</p>
    <p class="block text-center text-2xl font-medium font-mono">Sr</p>
    <p class="block text-center text-[0.55rem]">Strontium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>39</p>
    <p class="block text-center text-2xl font-medium font-mono">Y</p>
    <p class="block text-center text-[0.55rem]">Yttrium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>40</p>
    <p class="block text-center text-2xl font-medium font-mono">Zr</p>
    <p class="block text-center text-[0.55rem]">Zirconium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>41</p>
    <p class="block text-center text-2xl font-medium font-mono">Nb</p>
    <p class="block text-center text-[0.55rem]">Niobium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>42</p>
    <p class="block text-center text-2xl font-medium font-mono">Mo</p>
    <p class="block text-center text-[0.55rem]">Molybdenum</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>43</p>
    <p class="block text-center text-2xl font-medium font-mono">Tc</p>
    <p class="block text-center text-[0.55rem]">Technetium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>44</p>
    <p class="block text-center text-2xl font-medium font-mono">Ru</p>
    <p class="block text-center text-[0.55rem]">Ruthenium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>45</p>
    <p class="block text-center text-2xl font-medium font-mono">Rh</p>
    <p class="block text-center text-[0.55rem]">Rhodium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>46</p>
    <p class="block text-center text-2xl font-medium font-mono">Pd</p>
    <p class="block text-center text-[0.55rem]">Palladium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>47</p>
    <p class="block text-center text-2xl font-medium font-mono">Ag</p>
    <p class="block text-center text-[0.55rem]">Silver</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>48</p>
    <p class="block text-center text-2xl font-medium font-mono">Cd</p>
    <p class="block text-center text-[0.55rem]">Cadmium</p>
   </div>
   <div class="bg-green-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-green-500 hover:text-white duration-200 text-green-800">
    <p>49</p>
    <p class="block text-center text-2xl font-medium font-mono">In</p>
    <p class="block text-center text-[0.55rem]">Indium</p>
   </div>
   <div class="bg-green-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-green-500 hover:text-white duration-200 text-green-800">
    <p>50</p>
    <p class="block text-center text-2xl font-medium font-mono">Sn</p>
    <p class="block text-center text-[0.55rem]">Tin</p>
   </div>
   <div class="bg-yellow-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-yellow-500 hover:text-white duration-200 text-yellow-700">
    <p>51</p>
    <p class="block text-center text-2xl font-medium font-mono">Sb</p>
    <p class="block text-center text-[0.55rem]">Antimony</p>
   </div>
   <div class="bg-yellow-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-yellow-500 hover:text-white duration-200 text-yellow-700">
    <p>52</p>
    <p class="block text-center text-2xl font-medium font-mono">Te</p>
    <p class="block text-center text-[0.55rem]">Tellurium</p>
   </div>
   <div class="bg-sky-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-sky-500 hover:text-white duration-200 text-sky-700">
    <p>53</p>
    <p class="block text-center text-2xl font-medium font-mono">I</p>
    <p class="block text-center text-[0.55rem]">Iodine</p>
   </div>
   <div class="bg-pink-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-pink-500 hover:text-white duration-200 text-pink-700">
    <p>54</p>
    <p class="block text-center text-2xl font-medium font-mono">Xe</p>
    <p class="block text-center text-[0.55rem]">Xenon</p>
   </div>
   <div class="bg-cyan-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-cyan-500 hover:text-white duration-200 text-cyan-600">
    <p>55</p>
    <p class="block text-center text-2xl font-medium font-mono">Cs</p>
    <p class="block text-center text-[0.55rem]">Cesium</p>
   </div>
   <div class="bg-red-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-red-500 hover:text-white duration-200 text-red-500">
    <p>56</p>
    <p class="block text-center text-2xl font-medium font-mono">Ba</p>
    <p class="block text-center text-[0.55rem]">Barium</p>
   </div>
   <div class="bg-lime-50 w-full items-center inline-flex h-full text-center p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p class="text-center text-2xl justify-center mx-auto font-medium">L</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>72</p>
    <p class="block text-center text-2xl font-medium font-mono">Hf</p>
    <p class="block text-center text-[0.55rem]">Hafnium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>73</p>
    <p class="block text-center text-2xl font-medium font-mono">Ta</p>
    <p class="block text-center text-[0.55rem]">Tantalum</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>74</p>
    <p class="block text-center text-2xl font-medium font-mono">W</p>
    <p class="block text-center text-[0.55rem]">Tungsten</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>75</p>
    <p class="block text-center text-2xl font-medium font-mono">Re</p>
    <p class="block text-center text-[0.55rem]">Rhenium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>76</p>
    <p class="block text-center text-2xl font-medium font-mono">Os</p>
    <p class="block text-center text-[0.55rem]">Osmium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>77</p>
    <p class="block text-center text-2xl font-medium font-mono">Ir</p>
    <p class="block text-center text-[0.55rem]">Iridium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>78</p>
    <p class="block text-center text-2xl font-medium font-mono">Pt</p>
    <p class="block text-center text-[0.55rem]">Platinum</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>79</p>
    <p class="block text-center text-2xl font-medium font-mono">Au</p>
    <p class="block text-center text-[0.55rem]">Gold</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>80</p>
    <p class="block text-center text-2xl font-medium font-mono">Hg</p>
    <p class="block text-center text-[0.55rem]">Mercury</p>
   </div>
   <div class="bg-green-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-green-500 hover:text-white duration-200 text-green-800">
    <p>81</p>
    <p class="block text-center text-2xl font-medium font-mono">Tl</p>
    <p class="block text-center text-[0.55rem]">Thallium</p>
   </div>
   <div class="bg-green-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-green-500 hover:text-white duration-200 text-green-800">
    <p>82</p>
    <p class="block text-center text-2xl font-medium font-mono">Pb</p>
    <p class="block text-center text-[0.55rem]">Lead</p>
   </div>
   <div class="bg-green-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-green-500 hover:text-white duration-200 text-green-800">
    <p>83</p>
    <p class="block text-center text-2xl font-medium font-mono">Bi</p>
    <p class="block text-center text-[0.55rem]">Bismuth</p>
   </div>
   <div class="bg-green-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-green-500 hover:text-white duration-200 text-green-800">
    <p>84</p>
    <p class="block text-center text-2xl font-medium font-mono">Po</p>
    <p class="block text-center text-[0.55rem]">Polonium</p>
   </div>
   <div class="bg-yellow-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-yellow-500 hover:text-white duration-200 text-yellow-700">
    <p>85</p>
    <p class="block text-center text-2xl font-medium font-mono">At</p>
    <p class="block text-center text-[0.55rem]">Astatine</p>
   </div>
   <div class="bg-pink-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-pink-500 hover:text-white duration-200 text-pink-700">
    <p>86</p>
    <p class="block text-center text-2xl font-medium font-mono">Rn</p>
    <p class="block text-center text-[0.55rem]">Radon</p>
   </div>
   <div class="bg-cyan-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-cyan-500 hover:text-white duration-200 text-cyan-600">
    <p>87</p>
    <p class="block text-center text-2xl font-medium font-mono">Fr</p>
    <p class="block text-center text-[0.55rem]">Francium</p>
   </div>
   <div class="bg-red-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-red-500 hover:text-white duration-200 text-red-500">
    <p>88</p>
    <p class="block text-center text-2xl font-medium font-mono">Ra</p>
    <p class="block text-center text-[0.55rem]">Radium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center inline-flex h-full text-center p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p class="text-center text-2xl justify-center mx-auto font-medium">A</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>104</p>
    <p class="block text-center text-2xl font-medium font-mono">Rf</p>
    <p class="block text-center text-[0.55rem]">Rutherfordium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>105</p>
    <p class="block text-center text-2xl font-medium font-mono">Db</p>
    <p class="block text-center text-[0.55rem]">Dubnium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>106</p>
    <p class="block text-center text-2xl font-medium font-mono">Sg</p>
    <p class="block text-center text-[0.55rem]">Seaborgium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>107</p>
    <p class="block text-center text-2xl font-medium font-mono">Bh</p>
    <p class="block text-center text-[0.55rem]">Bohrium</p>
   </div>
   <div class="bg-purple-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-purple-500 hover:text-white duration-200 text-purple-500">
    <p>108</p>
    <p class="block text-center text-2xl font-medium font-mono">Hs</p>
    <p class="block text-center text-[0.55rem]">Hassium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>109</p>
    <p class="block text-center text-2xl font-medium font-mono">Mt</p>
    <p class="block text-center text-[0.55rem]">Meitnerium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>110</p>
    <p class="block text-center text-2xl font-medium font-mono">Ds</p>
    <p class="block text-center text-[0.55rem]">Darmstadtium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>111</p>
    <p class="block text-center text-2xl font-medium font-mono">Rg</p>
    <p class="block text-center text-[0.55rem]">Roentgenium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>112</p>
    <p class="block text-center text-2xl font-medium font-mono">Cn</p>
    <p class="block text-center text-[0.55rem]">Copernicium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>113</p>
    <p class="block text-center text-2xl font-medium font-mono">Nh</p>
    <p class="block text-center text-[0.55rem]">Nihonium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>114</p>
    <p class="block text-center text-2xl font-medium font-mono">Fl</p>
    <p class="block text-center text-[0.55rem]">Flerovium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>115</p>
    <p class="block text-center text-2xl font-medium font-mono">Mc</p>
    <p class="block text-center text-[0.55rem]">Moscovium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>116</p>
    <p class="block text-center text-2xl font-medium font-mono">Lv</p>
    <p class="block text-center text-[0.55rem]">Livermorium</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>117</p>
    <p class="block text-center text-2xl font-medium font-mono">Ts</p>
    <p class="block text-center text-[0.55rem]">Tennessine</p>
   </div>
   <div class="bg-zinc-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-zinc-500 hover:text-white duration-200 text-zinc-500">
    <p>118</p>
    <p class="block text-center text-2xl font-medium font-mono">Og</p>
    <p class="block text-center text-[0.55rem]">Oganesson</p>
   </div>
  </div>
  <div class="grid grid-cols-18 gap-1 mt-12">
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700 col-start-3">
    <p>57</p>
    <p class="block text-center text-2xl font-medium font-mono">La</p>
    <p class="block text-center text-[0.55rem]">Lanthanum</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>58</p>
    <p class="block text-center text-2xl font-medium font-mono">Ce</p>
    <p class="block text-center text-[0.55rem]">Cerium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>59</p>
    <p class="block text-center text-2xl font-medium font-mono">Pr</p>
    <p class="block text-center text-[0.55rem]">Praseodymium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>60</p>
    <p class="block text-center text-2xl font-medium font-mono">Nd</p>
    <p class="block text-center text-[0.55rem]">Neodymium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>61</p>
    <p class="block text-center text-2xl font-medium font-mono">Pm</p>
    <p class="block text-center text-[0.55rem]">Promethium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>62</p>
    <p class="block text-center text-2xl font-medium font-mono">Sm</p>
    <p class="block text-center text-[0.55rem]">Samarium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>63</p>
    <p class="block text-center text-2xl font-medium font-mono">Eu</p>
    <p class="block text-center text-[0.55rem]">Europium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>64</p>
    <p class="block text-center text-2xl font-medium font-mono">Gd</p>
    <p class="block text-center text-[0.55rem]">Gadolinium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>65</p>
    <p class="block text-center text-2xl font-medium font-mono">Tb</p>
    <p class="block text-center text-[0.55rem]">Terbium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>66</p>
    <p class="block text-center text-2xl font-medium font-mono">Dy</p>
    <p class="block text-center text-[0.55rem]">Dysprosium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>67</p>
    <p class="block text-center text-2xl font-medium font-mono">Ho</p>
    <p class="block text-center text-[0.55rem]">Holmium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>68</p>
    <p class="block text-center text-2xl font-medium font-mono">Er</p>
    <p class="block text-center text-[0.55rem]">Erbium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>69</p>
    <p class="block text-center text-2xl font-medium font-mono">Tm</p>
    <p class="block text-center text-[0.55rem]">Thulium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>70</p>
    <p class="block text-center text-2xl font-medium font-mono">Yb</p>
    <p class="block text-center text-[0.55rem]">Ytterbium</p>
   </div>
   <div class="bg-lime-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-lime-500 hover:text-white duration-200 text-lime-700">
    <p>71</p>
    <p class="block text-center text-2xl font-medium font-mono">Lu</p>
    <p class="block text-center text-[0.55rem]">Lutetium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700 col-start-3">
    <p>89</p>
    <p class="block text-center text-2xl font-medium font-mono">Ac</p>
    <p class="block text-center text-[0.55rem]">Actinium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>90</p>
    <p class="block text-center text-2xl font-medium font-mono">Th</p>
    <p class="block text-center text-[0.55rem]">Thorium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>91</p>
    <p class="block text-center text-2xl font-medium font-mono">Pa</p>
    <p class="block text-center text-[0.55rem]">Protactinium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>92</p>
    <p class="block text-center text-2xl font-medium font-mono">U</p>
    <p class="block text-center text-[0.55rem]">Uranium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>93</p>
    <p class="block text-center text-2xl font-medium font-mono">Np</p>
    <p class="block text-center text-[0.55rem]">Neptunium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>94</p>
    <p class="block text-center text-2xl font-medium font-mono">Pu</p>
    <p class="block text-center text-[0.55rem]">Plutonium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>95</p>
    <p class="block text-center text-2xl font-medium font-mono">Am</p>
    <p class="block text-center text-[0.55rem]">Americium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>96</p>
    <p class="block text-center text-2xl font-medium font-mono">Cm</p>
    <p class="block text-center text-[0.55rem]">Curium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>97</p>
    <p class="block text-center text-2xl font-medium font-mono">Bk</p>
    <p class="block text-center text-[0.55rem]">Berkelium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>98</p>
    <p class="block text-center text-2xl font-medium font-mono">Cf</p>
    <p class="block text-center text-[0.55rem]">Californium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>99</p>
    <p class="block text-center text-2xl font-medium font-mono">Es</p>
    <p class="block text-center text-[0.55rem]">Einsteinium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>100</p>
    <p class="block text-center text-2xl font-medium font-mono">Fm</p>
    <p class="block text-center text-[0.55rem]">Fermium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>101</p>
    <p class="block text-center text-2xl font-medium font-mono">Md</p>
    <p class="block text-center text-[0.55rem]">Mendelevium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>102</p>
    <p class="block text-center text-2xl font-medium font-mono">No</p>
    <p class="block text-center text-[0.55rem]">Nobelium</p>
   </div>
   <div class="bg-indigo-50 w-full items-center h-full flex flex-col p-4 rounded-md hover:bg-indigo-500 hover:text-white duration-200 text-indigo-700">
    <p>103</p>
    <p class="block text-center text-2xl font-medium font-mono">Lr</p>
    <p class="block text-center text-[0.55rem]">Lawrencium</p>
   </div>
  </div>
 </div>
</section>

Resources1× 0.5× 0.25×Rerun

Related Examples

Simple count down timer

Author:
Gopi Yadav

2 years ago

15k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.1k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

1.8k
pages / slides

Author:
MD Fardous Alom

8 months ago

1.2k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

8 months ago

1.2k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

5 months ago

543
Responsive fullscreen youtube video

Author:
Anonymous

2 years ago

8.7k
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

972
Product hunt showcase

Author:
Lukas Müller

2 years ago

12.1k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

6 months ago

613
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

8 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components