tailwind
<link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">tailwind
<link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">tailwind
It's an css framework which is used in Apple, Tesla etctailwind
.card-black {
@apply card bg-black border-gray-400 text-gray-500;
}
.card-blue {
@apply card bg-blue-200 border-blue-400 text-blue-700;
}
.card-gray {
@apply card bg-gray-200 border-gray-400 text-gray-700;
}
.card-green {
@apply card bg-green-200 border-green-400 text-green-700;
}
.card-indigo {
@apply card bg-indigo-200 border-indigo-400 text-indigo-700;
}
.card-orange {
@apply card bg-orange-200 border-orange-400 text-orange-700;
}
.card-pink {
@apply card bg-pink-200 border-pink-400 text-pink-700;
}
.card-purple {
@apply card bg-purple-200 border-purple-400 text-purple-700;
}
.card-red {
@apply card bg-red-200 border-red-400 text-red-700;
}
.card-teal {
@apply card bg-teal-200 border-teal-400 text-teal-700;
}
.card-transparent {
@apply card bg-transparent border-gray-400 text-gray-600;
}
.card-white {
@apply card bg-white border-gray-400 text-gray-700;
}
.card-yellow {
@apply card bg-yellow-200 border-yellow-400 text-yellow-700;
}tailwind
<div class="w-full flex items-center justify-between block p-6 space-x-6">
<div class="flex-1 truncate">
<div class="flex items-center space-x-3">
<h3 class="text-gray-900 text-sm font-medium truncate">Jane Cooper</h3>
<span class="text-teal-600 bg-tbg-fixedbackground-position: fixed;bg-localbg-scrollbg-clip-borderbg-clip-paddingbg-clip-contentbg-clip-textbg-transparentbg-currentbg-blackbg-whitebg-gray-50">Admin</span>
</div>
<p class="mt-1 text-gray-500 text-sm truncate">Regional Paradigm Technician</p>
</div>
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
</div>
<div class="border-t border-gray-200">
<div class="-mt-px flex">
<div class="w-0 flex-1 flex border-r border-gray-200">
<a href="#" class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150">
<svg class="w-5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
<span class="ml-3">Email</span>
</a>
</div>
</div>
</div>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
