www_tf_demo/templates/shortcodes/grid_stats.html

<section class="px-2 py-24 bg-center lg:py-54">
    <div class="mx-auto max-w-3xl sm:text-center">
        <h2 class="text-xl text-center font-normal tracking-wide text-indigo-600">LIVE AND OPERATIONAL</h2>
        <p class="mt-4 text-center text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">Proven by a Global Community</p>
        <p class="mt-6 text-lg text-center font-light text-gray-600">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017. Version 3.14 is live on Mainnet</p>
    </div>
    <div class="relative mx-auto mt-10">
        <div class="text-center rounded lg:px-6 mx-auto">
            <div class="items block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
                <!-- capacity -->
                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
                    <img class="mx-auto p-4 fade-image" src="images/V3-08.png" width="130" alt="">
                    <div id="capacity" class="leading-none font-extrabold text-xl">19.10 PB</div>
                    <span class="block text-md mt-1 font-normal capitalize">Capacity</span>
                </div>
                <!-- cores -->
                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
                    <img class="mx-auto p-4 fade-image" src="images/V3-11.png" width="130" alt="">
                    <div id="cores" class="leading-none font-extrabold text-xl">46,934</div>
                    <span class="block text-md mt-2 font-normal capitalize">Cores</span>
                </div>
                <!-- Nodes -->
                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
                    <img class="mx-auto p-4 fade-image" src="images/V3-09.png" width="130" alt="">
                    <div id="nodes" class="leading-none font-extrabold text-xl">1596</div>
                    <span class="block text-md mt-2 font-normal capitalize">Nodes</span>
                </div>
                <!-- countries -->
                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
                    <img class="mx-auto p-4 fade-image" src="images/V3-10.png" width="130" alt="">
                    <div id="countries" class="leading-none font-extrabold text-xl">41</div>
                    <span class="block text-md mt-2 font-normal capitalize">Countries</span>
                </div>
                <!-- farms -->
                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
                    <img class="mx-auto p-4 fade-image" src="images/farm.png" width="130" alt="">
                    <div id="farms" class="leading-none font-extrabold text-xl">900+</div>
                    <span class="block text-md mt-2 font-normal capitalize">Farms</span>
                </div>
            </div>
            <div class="mt-12 flex items-center justify-center gap-x-6 mb-24">
                <a href="#" class="rounded-xl bg-indigo-600 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Explore Grid Capacity</a>
                <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
            </div>
        </div>
    </div>
</section>

<style>
    dd {
        display: inline-block;
        margin: auto;
        border-radius: 50%;
        line-height: 100px;
    }

    .bg-green {
        background-color: #70dfc9;
    }

    .bg-pink {
        background-color: #ea1ff7;
    }

    .blue_b{
  
        background-color:#2E83FF !important;
        color: #fff !important;
    
      }
      .blue_b a{
         color: #fff !important;
      }
    
    .blue_b:hover {
      background-color:#5596f5 !important;
    }

 

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  font-size: 14px;
  visibility: hidden;
  width: 250px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: 200;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  bottom: -50px;
  right: -60px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

@media (max-width: 480px) {
    .tooltip .tooltiptext {
        position: absolute;
  z-index: 1;
  bottom: -50px;
  right: 0px !important;
    }

}

@keyframes fade {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    
}

.fade-image {
    animation: fade 3s infinite;
}

</style>