Ribbons
- Robotech
- /
- Advanced UI
- /
- Ribbons
Dastyle - Admin & Dashboard Template
Dastyle is a Bootstrap 4 admin dashboard,
It is fully responsive and included awesome
features to help build web applications fast and easy.
<div class="flex-auto p-4 relative">
<div class="absolute w-full h-[188px] -top-2 left-2 overflow-hidden">
<div
class=" after:absolute after:content-[''] after:bg-primary-600 after:w-2 after:h-10 after:rounded-br-[8px] after:rounded-tr-[8px] after:right-0 after:top-[50px] before:absolute before:content-[''] before:bg-primary-600 before:w-10 before:h-2 before:right-[50px] before:rounded-t-[8px] before:rounded-tr-[8px]">
<span class="absolute transform rotate-45 bg-primary-500 text-center text-white font-medium py-1 right-[-52px] top-[23px] w-[170px] h-5 z-[2] text-xs overflow-hidden border border-dashed leading-[8px] border-white shadow-[0_0_0_3px] shadow-primary-500">Popular</span>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-1/3">
<img src="assets/images/dashboards/dastyle.jpg" class="" alt="">
</div>
<div class="w-2/3 pl-4 self-center">
<p class="text-lg font-medium mb-2 dark:text-slate-300">Dastyle - Admin & Dashboard Template</p>
<p class="text-slate-400 text-sm mb-4">Dastyle is a Bootstrap 4 admin dashboard,
It is fully responsive and included awesome
features to help build web applications fast and easy.
</p>
<button class="px-2 py-2 lg:px-4 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600">Download New</button>
</div>
</div>
</div><!--end card-body-->
Metrica - Admin & Dashboard Template
Dastyle is a Bootstrap 4 admin dashboard,
It is fully responsive and included awesome
features to help build web applications fast and easy.
<div class="flex-auto p-4 relative">
<div class="absolute w-full h-[188px] -top-2 left-2 overflow-hidden">
<div
class=" after:absolute after:content-[''] after:bg-green-600 after:w-2 after:h-10 after:rounded-br-[8px] after:rounded-tr-[8px] after:right-0 after:top-[50px] before:absolute before:content-[''] before:bg-green-600 before:w-10 before:h-2 before:right-[50px] before:rounded-t-[8px] before:rounded-tr-[8px]">
<span class="absolute transform rotate-45 bg-green-500 text-center text-white font-medium py-1 right-[-52px] top-[23px] w-[170px] h-5 z-[2] text-xs overflow-hidden border border-dashed leading-[8px] border-white shadow-[0_0_0_3px] shadow-green-500">Popular</span>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-1/3">
<img src="assets/images/dashboards/metrica.jpg" class="" alt="">
</div>
<div class="w-2/3 pl-4 self-center">
<p class="text-lg font-medium mb-2 dark:text-slate-300">Metrica - Admin & Dashboard Template</p>
<p class="text-slate-400 text-sm mb-4">Dastyle is a Bootstrap 4 admin dashboard,
It is fully responsive and included awesome
features to help build web applications fast and easy.
</p>
<button class="px-2 py-2 lg:px-4 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600">Download New</button>
</div>
</div>
</div><!--end card-body-->
<div class="w-full sm:w-full md:w-1/2 lg:w-1/2 mx-auto">
<div class="bg-white dark:bg-slate-800 shadow rounded-md w-full relative overflow-hidden">
<div class="absolute left-0 top-0 h-14 w-14">
<div class="absolute left-[-36px] top-[32px] w-[170px] transform -rotate-45 bg-primary-500 text-center text-sm text-white font-semibold py-1">50% off</div>
</div>
<div class="flex-auto p-4 text-center">
<img src="assets/images/products/01.png" alt="" class="h-44 inline-block mb-4">
<span class="text-slate-500 text-sm block font-medium mb-1">Electric</span>
<a href="ecommerce-product-detail.html" class="text-lg font-semibold text-slate-700 dark:text-gray-400 leading-3">White Table Camera <span class="bg-yellow-600/5 text-yellow-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">3.6 <i class="mdi mdi-star"></i></span></a>
<div class="py-1 px-3 rounded-md bg-slate-50 mt-6 dark:bg-slate-600/20">
<div class="grid grid-cols-2">
<div class="col-span-1 border-r border-dashed dark:border-r-slate-700">
<h4 class="text-4xl font-medium dark:text-slate-300"><sup class="text-sm text-slate-500">$</sup>49</h4>
</div>
<div class="col-span-1 self-center">
<button class="inline-block focus:outline-none text-primary-500 hover:bg-transparent hover:text-primary-500 bg-transparent text-md font-medium py-1 px-3 rounded"> <i class="ti ti-shopping-cart"></i> Add to cart</button>
</div>
</div>
</div>
</div><!--end card-body-->
</div> <!--end card-->
</div>
<div class="w-full sm:w-full md:w-1/2 lg:w-1/2 mx-auto">
<div class="bg-white dark:bg-slate-800 shadow rounded-md w-full relative overflow-hidden">
<div class="absolute left-0 top-0 h-14 w-14">
<div class="absolute left-[-36px] top-[32px] w-[170px] transform -rotate-45 bg-primary-500 text-center text-sm text-white font-semibold py-1">50% off</div>
</div>
<div class="flex-auto p-4 text-center">
<img src="assets/images/products/02.png" alt="" class="h-44 inline-block mb-4">
<span class="text-slate-500 text-sm block font-medium mb-1">Fashion & Life Style</span>
<a href="ecommerce-product-detail.html" class="text-lg font-semibold text-slate-700 dark:text-gray-400 leading-3">New Colorfull Shoes <span class="bg-yellow-600/5 text-yellow-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">3.6 <i class="mdi mdi-star"></i></span></a>
<div class="py-1 px-3 rounded-md bg-slate-50 mt-6 dark:bg-slate-600/20">
<div class="grid grid-cols-2">
<div class="col-span-1 border-r border-dashed dark:border-r-slate-700">
<h4 class="text-4xl font-medium dark:text-slate-300"><sup class="text-sm text-slate-500">$</sup>99</h4>
</div>
<div class="col-span-1 self-center">
<button class="inline-block focus:outline-none text-primary-500 hover:bg-transparent hover:text-primary-500 bg-transparent text-md font-medium py-1 px-3 rounded"> <i class="ti ti-shopping-cart"></i> Add to cart</button>
</div>
</div>
</div>
</div><!--end card-body-->
</div> <!--end card-->
</div>
@@include("partials/footer/footer.html")
