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

221 lines
8.3 KiB
Markdown
Raw Permalink Blame History

---
sidebar_position: 2
---
# Solid Blue Background Icon With Gray Background On Hover
![Cards](/img/solid-blue-background-icon-with-gray-background-on-hover.png)
```jsx title="Frontend/sections/IconSections/SolidBlueBackgroundIconWithGrayBackgroundOnHover.tsx"
<>
{/* <!-- Icon Blocks --> */}
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
{/* <!-- Icon Block --> */}
<a
className="group flex flex-col justify-center hover:bg-base-300 rounded-xl p-4 md:p-7"
href="#"
>
<div className="flex justify-center items-center w-12 bg-primary rounded-xl">
<svg
className="flex-shrink-0 w-6 text-primary-content"
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"
>
<rect width="10" height="14" x="3" y="8" rx="2" />
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
<path d="M8 18h.01" />
</svg>
</div>
<div className="mt-5">
<h3 className="group-hover:text-secondary-content text-lg font-semibold text-secondary-content">
Responsive
</h3>
<p className="mt-1 text-secondary-content">
Responsive, and mobile-first project on the web
</p>
<span className="mt-2 inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 group-hover:underline font-medium">
Learn 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>
</span>
</div>
</a>
{/* <!-- End Icon Block --> */}
{/* <!-- Icon Block --> */}
<a
className="group flex flex-col justify-center hover:bg-base-300 rounded-xl p-4 md:p-7"
href="#"
>
<div className="flex justify-center items-center w-12 bg-primary rounded-xl">
<svg
className="flex-shrink-0 w-6 text-primary-content"
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="M20 7h-9" />
<path d="M14 17H5" />
<circle cx="17" cy="17" r="3" />
<circle cx="7" cy="7" r="3" />
</svg>
</div>
<div className="mt-5">
<h3 className="group-hover:text-secondary-content text-lg font-semibold text-secondary-content">
Customizable
</h3>
<p className="mt-1 text-secondary-content">
Components are easily customized and extendable
</p>
<span className="mt-2 inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 group-hover:underline font-medium">
Learn 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>
</span>
</div>
</a>
{/* <!-- End Icon Block --> */}
{/* <!-- Icon Block --> */}
<a
className="group flex flex-col justify-center hover:bg-base-300 rounded-xl p-4 md:p-7"
href="#"
>
<div className="flex justify-center items-center w-12 bg-primary rounded-xl">
<svg
className="flex-shrink-0 w-6 text-primary-content"
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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
</svg>
</div>
<div className="mt-5">
<h3 className="group-hover:text-secondary-content text-lg font-semibold text-secondary-content">
Documentation
</h3>
<p className="mt-1 text-secondary-content">
Every component and plugin is well documented
</p>
<span className="mt-2 inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 group-hover:underline font-medium">
Learn 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>
</span>
</div>
</a>
{/* <!-- End Icon Block --> */}
{/* <!-- Icon Block --> */}
<a
className="group flex flex-col justify-center hover:bg-base-300 rounded-xl p-4 md:p-7"
href="#"
>
<div className="flex justify-center items-center w-12 bg-primary rounded-xl">
<svg
className="flex-shrink-0 w-6 text-primary-content"
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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
</svg>
</div>
<div className="mt-5">
<h3 className="group-hover:text-secondary-content text-lg font-semibold text-secondary-content">
24/7 Support
</h3>
<p className="mt-1 text-secondary-content">
Contact us 24 hours a day, 7 days a week
</p>
<span className="mt-2 inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 group-hover:underline font-medium">
Learn 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>
</span>
</div>
</a>
{/* <!-- End Icon Block --> */}
</div>
</div>
{/* <!-- End Icon Blocks --> */}
</>
```
View Git Blame Copy Permalink