carde Iptplus

Iptplus carde

This tailwind example is contributed by Omer fils ELENGA, on 30-Nov-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner,Article Card, Blog page card, Article card

Card Call to Action Blog Card

Author Omer fils ELENGA

Tailwind v3.4 429 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
 
<body>
    
    <section class="omer-page bg-gray-50 ">
    
<section class="px-6  sm:px-8 md:px-10 flex flex-col md:flex-row gap-8 md:gap-3 xl:gap-5 py-20 justify-center bg-white   ">
  <div
    class="px-[35px] py-[50px] xl:px-[50px] xl:py-[60px] w-full md:w-1/2 xl:w-[535px] flex flex-col justify-between bg-[#0147ff] rounded-[50px]">
    <div>
      <div class="w-80 text-white text-3xl sm:text-4xl font-bold ">Iptplus </div>
      <div class="mt-9 flex  justify-between "><svg width="74" height="74" class="xl:inline-block hidden"
          viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="37" cy="37" r="37" fill="#D9D9D9"></circle>
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M32.6256 27.5208C32.6256 26.6809 33.3247 26 34.1872 26H47.4383C48.3008 26 49 26.6809 49 27.5208V40.4253C49 41.2652 48.3008 41.9461 47.4383 41.9461C46.5759 41.9461 45.8767 41.2652 45.8767 40.4253V31.1924L28.6659 47.953C28.0561 48.5469 27.0673 48.5469 26.4574 47.953C25.8475 47.359 25.8475 46.3961 26.4574 45.8022L43.6682 29.0416H34.1872C33.3247 29.0416 32.6256 28.3607 32.6256 27.5208Z"
            fill="#0147FF"></path>
        </svg>
        <div class="xl:w-[300px] text-white text-lg sm:text-xl font-normal  leading-loose">Bienvenue sur Iptplus, une plateforme d'échange de technologies et d'informations pour les entreprises et les professionnels et particuliers pour vous aider à trouver le bon produit pour vous.</div>
      </div>
    </div>
    <div class="mt-10  flex flex-row md:flex-col gap-5 items-center  xl:gap-0 xl:flex-row justify-between">
      <figure class="sm:flex hidden  -space-x-10 lg:-space-x-0 xl:-space-x-10 md:-space-x-8">
        <img class="w-20 h-20 mr-0[-40px] rounded-[100px]" src="https://iili.io/3YxKvta.png"><img class="w-20 h-20 mr-0[-40px] rounded-[100px]" src="https://iili.io/3YxKvta.png"><img class="w-20 h-20 mr-0[-40px] rounded-[100px]" src="https://iili.io/3YxKvta.png"><img class="w-20 h-20 mr-0[-40px] rounded-[100px]" src="https://iili.io/3YxKvta.png">
      </figure>
      <button data-omer-anim="left" data-omer-link="/pages/store.omer" class="px-6 py-3 sm:px-8 sm:py-5 w-full sm:w-auto  md:w-full xl:w-auto   rounded-[100px]  border border-white flex justify-center items-center gap-5  text-white text-xl sm:text-2xl font-medium ">Nos produits <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.89715 1.65427C4.89715 1.01678 5.41394 0.5 6.05142 0.5H15.8457C16.4832 0.5 17 1.01678 17 1.65427V11.4486C17 12.0861 16.4832 12.6028 15.8457 12.6028C15.2082 12.6028 14.6915 12.0861 14.6915 11.4486V4.44092L1.97046 17.1619C1.51969 17.6127 0.788848 17.6127 0.338078 17.1619C-0.112693 16.7112 -0.112693 15.9803 0.338078 15.5295L13.0591 2.80854H6.05142C5.41394 2.80854 4.89715 2.29176 4.89715 1.65427Z" fill="white"></path></svg></button>
    </div>
  </div>
  <div class="w-full md:w-1/2 ">
    <div class="w-full md:max-w-[670px] px-[35px] py-[50px] xl:px-[50px] xl:py-[60px] bg-[#0147ff] rounded-[50px]">
       <div class="w-80 text-white text-3xl sm:text-4xl font-bold ">Maintenant</div>
      <p class="mt-9 text-white text-lg  sm:text-xl font-normal  leading-loose">Nous sommes une équipe de techniciens et d'ingénieurs qui travaillent sur la création de nouveaux produits et technologies.</p>
    <button data-omer-anim="up" data-omer-link="/pages/contact.omer" class="px-6 mt-8 py-3 sm:px-8 sm:py-5 w-full sm:w-auto  md:w-full xl:w-auto   rounded-[100px]  border border-white flex justify-center items-center gap-5  text-white text-xl sm:text-2xl font-medium ">Contactez-nous   <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.89715 1.65427C4.89715 1.01678 5.41394 0.5 6.05142 0.5H15.8457C16.4832 0.5 17 1.01678 17 1.65427V11.4486C17 12.0861 16.4832 12.6028 15.8457 12.6028C15.2082 12.6028 14.6915 12.0861 14.6915 11.4486V4.44092L1.97046 17.1619C1.51969 17.6127 0.788848 17.6127 0.338078 17.1619C-0.112693 16.7112 -0.112693 15.9803 0.338078 15.5295L13.0591 2.80854H6.05142C5.41394 2.80854 4.89715 2.29176 4.89715 1.65427Z" fill="white"></path></svg></button>
    </div>
     
  </div>
</section>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </section>

<div class="fixed bottom-0 left-0 right-0 z-50 safe-area-bottom ">
        
         
    <div class="w-full p-4 mx-auto rounded-full">
        <div class="grid  backdrop-blur-lg rounded-full max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2   " role="group">
           <button  type="button"  class="px-5 bg-[#157cda] flex items-center justify-center flex-col py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-full">    
                <svg  class="w-6 h-6 text-gray-100 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" xmlns="http://www.w3.org/2000/svg" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M12.71 2.29a1 1 0 0 0-1.42 0l-9 9a1 1 0 0 0 0 1.42A1 1 0 0 0 3 13h1v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7h1a1 1 0 0 0 1-1 1 1 0 0 0-.29-.71zM6 20v-9.59l6-6 6 6V20z"></path>
                </svg>
                 <span class="text-[10px] mt-1 text-gray-100   group-hover:text-white-600  transition-colors">Home</span>
            </button>
            <button data-omer-link="/pages/store.omer"  type="button"  class="px-5  flex items-center justify-center flex-col py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-full" >
               <svg  fill="currentColor" class="w-6 h-6 text-gray-100 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"  xmlns="http://www.w3.org/2000/svg"  style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"  viewBox="0 0 24 24"><path d="M19.148 2.971A2.008 2.008 0 0 0 17.434 2H6.566c-.698 0-1.355.372-1.714.971L2.143 7.485A.995.995 0 0 0 2 8a3.97 3.97 0 0 0 1 2.618V19c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-8.382A3.97 3.97 0 0 0 22 8a.995.995 0 0 0-.143-.515l-2.709-4.514zm.836 5.28A2.003 2.003 0 0 1 18 10c-1.103 0-2-.897-2-2 0-.068-.025-.128-.039-.192l.02-.004L15.22 4h2.214l2.55 4.251zM10.819 4h2.361l.813 4.065C13.958 9.137 13.08 10 12 10s-1.958-.863-1.993-1.935L10.819 4zM6.566 4H8.78l-.76 3.804.02.004C8.025 7.872 8 7.932 8 8c0 1.103-.897 2-2 2a2.003 2.003 0 0 1-1.984-1.749L6.566 4zM10 19v-3h4v3h-4zm6 0v-3c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v3H5v-7.142c.321.083.652.142 1 .142a3.99 3.99 0 0 0 3-1.357c.733.832 1.807 1.357 3 1.357s2.267-.525 3-1.357A3.99 3.99 0 0 0 18 12c.348 0 .679-.059 1-.142V19h-3z"></path></svg>
                          <span class="text-[10px] mt-1 text-gray-100   group-hover:text-white-600  transition-colors">store</span>
            </button>
            <button   data-omer-link="/pages/contact.omer" type="button" class="px-5  flex items-center justify-center flex-col py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-full">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M16.57 22a2 2 0 0 0 1.43-.59l2.71-2.71a1 1 0 0 0 0-1.41l-4-4a1 1 0 0 0-1.41 0l-1.6 1.59a7.55 7.55 0 0 1-3-1.59 7.62 7.62 0 0 1-1.59-3l1.59-1.6a1 1 0 0 0 0-1.41l-4-4a1 1 0 0 0-1.41 0L2.59 6A2 2 0 0 0 2 7.43 15.28 15.28 0 0 0 6.3 17.7 15.28 15.28 0 0 0 16.57 22zM6 5.41 8.59 8 7.3 9.29a1 1 0 0 0-.3.91 10.12 10.12 0 0 0 2.3 4.5 10.08 10.08 0 0 0 4.5 2.3 1 1 0 0 0 .91-.27L16 15.41 18.59 18l-2 2a13.28 13.28 0 0 1-8.87-3.71A13.28 13.28 0 0 1 4 7.41zM20 11h2a8.81 8.81 0 0 0-9-9v2a6.77 6.77 0 0 1 7 7z"></path><path d="M13 8c2.1 0 3 .9 3 3h2c0-3.22-1.78-5-5-5z"></path></svg>
                 <span class="text-[10px] mt-1 text-gray-500   group-hover:text-white-600  transition-colors">Contact</span>
            </button>
        </div>
    </div>

</div>

</body>
</html>