timniel
/
Quiz-PDF
forked from mrwyndham/fastpocket
1
0
Fork 0
Code Pull Requests Activity
Quiz-PDF/Documentation/docs/components/blog sections/TwoGridsList.md

182 lines
7.9 KiB
Markdown
Raw Blame History

---
sidebar_position: 2
---
# Two Grids List
![Cards](/img/two-grids-list.png)
```jsx title="Frontend/sections/BlogSections/TwoGridsList.tsx"
<>
{/* <!-- Card Blog --> */}
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
{/* <!-- Grid --> */}
<div className="grid lg:grid-cols-2 lg:gap-y-16 gap-10">
{/* <!-- Card --> */}
<a className="group rounded-xl overflow-hidden" href="#">
<div className="sm:flex">
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
src="https://images.unsplash.com/photo-1540575861501-7cf05a4b125a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
alt="Image Description"
/>
</div>
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
Studio by FastPocket
</h3>
<p className="mt-3 text-secondary-content">
Produce professional, reliable streams easily leveraging
FastPocket's innovative broadcast studio
</p>
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
Read more
<svg
className="flex-shrink-0 w-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</p>
</div>
</div>
</a>
{/* <!-- End Card --> */}
{/* <!-- Card --> */}
<a className="group rounded-xl overflow-hidden" href="#">
<div className="sm:flex">
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
src="https://images.unsplash.com/photo-1668906093328-99601a1aa584?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=986&q=80"
alt="Image Description"
/>
</div>
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
Onsite
</h3>
<p className="mt-3 text-secondary-content">
Optimize your in-person experience with best-in-className
capabilities like badge printing and lead retrieval
</p>
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
Read more
<svg
className="flex-shrink-0 w-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</p>
</div>
</div>
</a>
{/* <!-- End Card --> */}
{/* <!-- Card --> */}
<a className="group rounded-xl overflow-hidden" href="#">
<div className="sm:flex">
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
src="https://images.unsplash.com/photo-1567016526105-22da7c13161a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
alt="Image Description"
/>
</div>
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
The complete guide to OKRs
</h3>
<p className="mt-3 text-secondary-content">
How to make objectives and key results work for your company
</p>
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
Read more
<svg
className="flex-shrink-0 w-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</p>
</div>
</div>
</a>
{/* <!-- End Card --> */}
{/* <!-- Card --> */}
<a className="group rounded-xl overflow-hidden" href="#">
<div className="sm:flex">
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
alt="Image Description"
/>
</div>
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
People program models
</h3>
<p className="mt-3 text-secondary-content">
Six approaches to bringing your People strategy to life
</p>
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
Read more
<svg
className="flex-shrink-0 w-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</p>
</div>
</div>
</a>
{/* <!-- End Card --> */}
</div>
{/* <!-- End Grid --> */}
</div>
{/* <!-- End Card Blog --> */}
</>
```
View Git Blame Copy Permalink