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.

1.7k

<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

14.4k
Sticky fullpage pages / slides

Author:
Laurits

1 year ago

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

Author:
Ameth Galarcio

7 months ago

1.5k
pages / slides

Author:
MD Fardous Alom

2 months ago

506
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

2 months ago

469
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Author:
Ahita Bisma Adlula

1 month ago

141
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

1 year ago

18.1k
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

2 years ago

8.5k
Checkbox
Checkbox

Author:
Aman kumar

8 months ago

1.1k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

1 month ago

101
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

1 month ago

294
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Author:
Komal Jain

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components