www_mycelium/templates/shortcodes/tabs_tech.html

<div class="container mx-auto mb-0 md:mb-24  mt-0 md:mt-4">
   <div class="mb-4">
        <div class="grid grid-cols-3 gap-2 mx-2 px-0 lg:px-2 font-medium text-center text-gray-500  sm:flex" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 border-purple-600" data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 border-purple-600  data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" role="tablist">
            <div class="w-full md:w-1/3 mx-0 md:mx-2 list-none  focus-within:z-10" role="presentation">
                <button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="profile-styled-tab" data-tabs-target="#styled-profile" id="profile-styled-tab" data-tabs-target="#styled-profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                Quantum Safe Storage<br><span class="font-semibold">FUNGISTOR</span></button>
            </div>
            <div class="w-full md:w-1/3 mx-0 md:mx-2 list-none  focus-within:z-10" role="presentation">
                <button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="dashboard-styled-tab" data-tabs-target="#styled-dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Autonomous Cloud<br><span class="font-semibold">ZERO-OS</span></button>
            </div>
            <div class="w-full md:w-1/3 md:mx-2 list-none  focus-within:z-10" role="presentation">
                <button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="settings-styled-tab" data-tabs-target="#styled-settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Peer-to-Peer Network<br><span class="font-semibold">MYCELIUM</span></button>
            </div>
           
        </div>
    </div>
    <div id="default-styled-tab-content">
        <div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-profile" role="tabpanel" aria-labelledby="profile-tab">
            
              
            <div class="flex flex-wrap justify-center items-center">

               <div class="w-full p-2 md:p-8">
                <h4 class="blue my-0 md:my-4 font-semibold">FungiStor: A Quantum Safe Storage System</h4>
                    
                    
                    <p>The Quantum-Safe Storage System is a decentralized, globally distributed data storage system.</p>
                     <br>
                    <p>
                        The benefits are incredible: Up to 10x more efficient (power and usage of hardware). Super reliable, data can not be lost or corrupted. Safe, private and scalable.</p>
                        <br>
                    <p>
                        Sovereign, data is close to you in the country of your choice. Truly peer-to-peer, by everyone for everyone.</p>
                        
                        <div class="flex flex-wrap  items-center my-6">
                        <p class="font-semibold">ULTRA RELIABLE AND SCALABLE    </p>
                        <p class="mx-4 font-semibold"> |  </p>
                        <p class="font-semibold"> HACKER PROOF  AND SECURE</p>
                        <p class="mx-4 font-semibold"> |  </p>
                        <p class="font-semibold">LOW OVERHEAD AND SELF-HEALING</p>
                       </div>
                </div>
                {# <div class="w-full md:w-1/2">
                <img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_3node.png" alt="" />
                </div> #}
            </div>
            
        
        </div>
        <div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
            <div class="flex flex-wrap justify-center items-center">

                <div class="w-full p-2 md:p-8">
                    <h4 class="blue my-0 md:my-4 font-semibold">The Cloud Layer based on Zero-OS, a new Operating System</h4>
                
                    <p>Zero-OS is a bare-metal, stateless, and efficient operating system designed to host AI, Web2, and Web3 workloads in a more decentralized manner, without compromising on security, control, and monitoring.</p>
                    <p></p>
                     <br>
                    <p>
                        Zero-OS is compatible with nearly all computer hardware and is run directly on the hardware.</p>
                        <br>
                    <p>
                        It enables anyone to become a cloud service provider without needing cloud expertise. <br>
                        <br>The operating system functions fully autonomously, requiring no interventions.</p>
                        
                        <div class="flex flex-wrap  items-center my-6">
                        <p class="font-semibold">SELF HEALING</p>
                        <p class="mx-4 font-semibold"> |  </p>
                        <p class="font-semibold">AUTONOMOUS</p>
                        <p class="mx-4 font-semibold"> |  </p>
                        <p class="font-semibold">DEVELOPED FROM THE LINUX KERNEL</p>
                        </div>
                    </div>
                 {# <div class="w-full md:w-1/2">
                  <img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_zero_os.png" alt="" />
                 </div> #}
            </div>
            
        </div>
        <div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-settings" role="tabpanel" aria-labelledby="settings-tab">
            <div class="flex flex-wrap justify-center items-center">

                <div class="w-full p-2 md:p-8">
                    <h4 class="green_text my-0 md:my-4 font-semibold">Mycelium: A Quantum Safe Storage Network</h4>
                    
                    
                    <p>Mycelium is the culmination of a decade-long quest for a more efficient network system, enabling faster and more reliable communication between machines and people.</p>
                     <br>
                    <p>Our goal was to create a network that can identify and utilize the fastest and most direct paths between participants, remain operational even in challenging conditions (such as fiber cuts), and secure all traffic.</p>
                        <br>
                    <p>
                        With Mycelium, data travels the most efficient routes, leveraging any available internet connection, including peer-to-peer networks like mesh wireless. 
                        All traffic is end-to-end encrypted, effectively preventing man-in-the-middle attacks.
                        Each machine or user is identified by a unique cryptographic key which is linked to your ThreeFold Internet Address, ensuring that only authorized participants can access the network.
                        
                        </p>
                        
                        <div class="flex flex-wrap  items-center my-6">
                        <p class="font-semibold uppercase">End-to-end encrypted</p>
                        <p class="mx-4 font-semibold"> |  </p>
                        <p class="font-semibold uppercase"> shortest path route </p>
                        <p class="mx-4 font-semibold"> |  </p>
                        <p class="font-semibold uppercase"> unbreakable </p>
                       </div>
                    </div>
                 {# <div class="w-full md:w-1/2">
                  <img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_qsfs.png" alt="" />
                 </div> #}
            </div>
        </div>
    </div>
</div>