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.6k

<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

3 years ago

15.3k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

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

Author:
Ameth Galarcio

1 year ago

2.1k
pages / slides

Author:
MD Fardous Alom

1 year ago

1.4k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

1 year ago

1.5k
Sticky fullpage pages / slides
Sticky full page

Author:
harinandana

3 months ago

331
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.5k
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

1 year ago

1.9k
machine
tell you how your MAC pc work

Author:
gidy

2 months ago

216
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

1 year ago

3.1k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

3 months ago

210
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components