- 导航菜单 - Tailwind CSS
<nav class="flex items-center justify-between p-6">
<a class="text-xl font-bold text-blue-500" href="#">Logo</a>
<ul class="flex items-center">
<li><a href="#" class="px-4 py-2 text-blue-500">首页</a></li>
<li><a href="#" class="px-4 py-2 text-blue-500">关于我们</a></li>
<li><a href="#" class="px-4 py-2 text-blue-500">产品</a></li>
<li><a href="#" class="px-4 py-2 text-blue-500">联系我们</a></li>
</ul>
</nav>
- 卡片 - Tailwind CSS
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="https://tailwindcss.com/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
</div>
</div>
- 模态框 - Tailwind CSS
<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-75"></div>
<div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
<!-- Content -->
<div class="modal-close cursor-pointer flex items-center justify-center absolute right-0 top-0 w-10 h-10 ml-4 mt-4">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.536l-1.068 1.068-1.414-1.414L10.824 7.643 9.484 6.354l1.414-1.414L12 2.036 13.476 3.727 14.53 5.371 15.586 4.536 13.476 6.273l1.068-1.068L14.53 4.536z"></path>
</svg>
</div>
</div>
</div>
- 进度条 - Tailwind CSS
<div class="w-full
评论已关闭