tab样式

使用一个checkbox+label标签完成的tab切换页

• https://play.tailwindcss.com/sKJkXVg4oW
• https://play.tailwindcss.com/Gy7atwcrA4

<div class="container mx-auto">
  <input class="hidden" type="radio" id="box0" checked name="boxlist" />
  <input class="hidden" type="radio" id="box1" name="boxlist" />
  <input class="hidden" type="radio" id="box2" name="boxlist" />

  <div class="flex justify-center mt-10">
    <label class="mx-2 py-2 px-6 bg-gray-200 rounded-full cursor-pointer" for="box0">数据管理</label>
    <label class="mx-2 py-2 px-6 bg-gray-200 rounded-full cursor-pointer" for="box1">界面简洁</label>
    <label class="mx-2 py-2 px-6 bg-gray-200 rounded-full cursor-pointer" for="box2">功能强大</label>
  </div>

  <div class="hidden p-8 items-center shadow-lg rounded-lg box0">
    <div class="w-3/5">
      <h2 class="text-2xl font-bold">数据管理</h2>
      <p class="mt-3">我们的用户后台采用python+PHP制作，拥有强大的用户系统，安全的用户隐私保护，与同类软件相比我们的用户后台更加安全强大</p>
      <button class="text-lg bg-black text-white rounded-full shadow py-2 px-5 mt-5 hover:scale-110 transform transition hover:bg-blue-600">原页面</button>
    </div>
    <div class="w-2/5">
      <img src="http://tab.sukiu.xyz/images/grad/img1.svg" alt="" />
    </div>
  </div>

  <div class="hidden p-8 items-center shadow-lg rounded-lg box1">
    <div class="w-3/5">
      <h2 class="text-2xl font-bold">精简的界面</h2>
      <p class="mt-3">我们的界面简洁实用、内存占用小、属于同类软件中的领先者</p>
      <button class="text-lg bg-black text-white rounded-full shadow py-2 px-5 mt-5 hover:scale-110 transform transition hover:bg-blue-600">原页面</button>
    </div>
    <div class="w-2/5">
      <img src="http://tab.sukiu.xyz/images/grad/img2.svg" alt="" />
    </div>
  </div>

  <div class="hidden p-8 items-center shadow-lg rounded-lg box2">
    <div class="w-3/5">
      <h2 class="text-2xl font-bold">功能强大 永久免费</h2>
      <p class="mt-3">同类软件中我们的功能更强大且功能更加齐全，Tab工具箱制作历时15个月，更改模板289次，更改功能509次，只为更好的用户体验</p>
      <button class="text-lg bg-black text-white rounded-full shadow py-2 px-5 mt-5 hover:scale-110 transform transition hover:bg-blue-600">原页面</button>
    </div>
    <div class="w-2/5">
      <img src="http://tab.sukiu.xyz/images/grad/banner-img.svg" alt="" />
    </div>
  </div>
</div>

<div class="container mx-auto">
  <input type="radio" name="tab" id="iphone-12-pro" class="hidden" checked />
  <input type="radio" name="tab" id="iphone-12" class="hidden" />
  <input type="radio" name="tab" id="iphone-se" class="hidden" />

  <div class="my-4 nav">
    <label for="iphone-12-pro">
      <span class="py-2 px-5 rounded-full inline-block">iphone 12 Pro</span>
    </label>
    <label for="iphone-12">
      <span class="py-2 px-5 rounded-full inline-block">iphone 12</span>
    </label>
    <label for="iphone-se">
      <span class="py-2 px-5 rounded-full inline-block">iphone SE</span>
    </label>
  </div>

  <div class="p-8 rounded-xl shadow-md hidden tab-iphone-12-pro">
    <div class="w-3/5 flex flex-col justify-center">
      <div>
        <h2 class="text-2xl font-bold">iPhone 12 Pro</h2>
        <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus reprehenderit, voluptatibus suscipit doloremque accusamus, officiis ducimus, sequi nemo id quam qui distinctio animi. Quisquam, dignissimos! Illo provident corporis quia nostrum.</p>
        <button class="text-lg bg-black rounded-full shadow py-2 px-5 text-white mt-6 transform hover:scale-110 hover:bg-blue-600 transition">Shop Now</button>
      </div>
    </div>
    <div class="w-2/5">
      <img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-12-pro-family-hero?wid=940&amp;fmt=jpeg&amp;qlt=80&amp;.v1604021663000>" alt="error" />
    </div>
  </div>

  <div class="p-8 rounded-xl shadow-md hidden tab-iphone-12">
    <div class="w-3/5 flex flex-col justify-center">
      <div>
        <h2 class="text-2xl font-bold">iPhone 12</h2>
        <p class="mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, magnam voluptas facilis nam excepturi placeat, laborum sed, perferendis esse obcaecati corrupti sit praesentium adipisci provident odio natus fuga aliquid hic!</p>
        <button class="text-lg bg-black rounded-full shadow py-2 px-5 text-white mt-6 transform hover:scale-110 hover:bg-blue-600 transition">Shop Now</button>
      </div>
    </div>
    <div class="w-2/5">
      <img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-12-family-select-2020?wid=940&amp;hei=1112&amp;fmt=jpeg&amp;qlt=80&amp;.v=1604343709000>" alt="error" />
    </div>
  </div>

  <div class="p-8 rounded-xl shadow-md hidden tab-iphone-se">
    <div class="w-3/5 flex flex-col justify-center">
      <div>
        <h2 class="text-2xl font-bold">iPhone SE</h2>
        <p class="mt-3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda eaque deleniti quos. Ratione corporis voluptas numquam vel? Impedit, doloribus tempora suscipit quidem consectetur possimus esse nostrum, blanditiis, perferendis accusantium nihil.</p>
        <button class="text-lg bg-black rounded-full shadow py-2 px-5 text-white mt-6 transform hover:scale-110 hover:bg-blue-600 transition">Shop Now</button>
      </div>
    </div>
    <div class="w-2/5">
      <img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-se-family-select-2020?wid=940&amp;hei=1112&amp;fmt=jpeg&amp;qlt=80&amp;.v1586794486444>" alt="error" />
    </div>
  </div>
</div>