forked from mrwyndham/fastpocket
308 lines
11 KiB
Markdown
308 lines
11 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Image And Content With Stretched Buttons
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/CardSections/SimpleCardLinkWithTitleAndDescription.tsx"
|
|
<>
|
|
{/* <!-- Card Section --> */}
|
|
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
|
{/* <!-- Grid --> */}
|
|
<div className="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6">
|
|
{/* <!-- Card --> */}
|
|
<a
|
|
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
<div className="p-4 md:p-5">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
|
Management
|
|
</h3>
|
|
<p className="text-sm text-secondary-content/50">
|
|
4 job positions
|
|
</p>
|
|
</div>
|
|
<div className="ps-3">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
|
|
{/* <!-- Card --> */}
|
|
<a
|
|
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
<div className="p-4 md:p-5">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
|
App Development
|
|
</h3>
|
|
<p className="text-sm text-secondary-content/50">
|
|
26 job positions
|
|
</p>
|
|
</div>
|
|
<div className="ps-3">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
|
|
{/* <!-- Card --> */}
|
|
<a
|
|
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
<div className="p-4 md:p-5">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
|
Arts & Entertainment
|
|
</h3>
|
|
<p className="text-sm text-secondary-content/50">
|
|
9 job positions
|
|
</p>
|
|
</div>
|
|
<div className="ps-3">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
|
|
{/* <!-- Card --> */}
|
|
<a
|
|
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
<div className="p-4 md:p-5">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
|
Accounting
|
|
</h3>
|
|
<p className="text-sm text-secondary-content/50">
|
|
11 job positions
|
|
</p>
|
|
</div>
|
|
<div className="ps-3">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
|
|
{/* <!-- Card --> */}
|
|
<a
|
|
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
<div className="p-4 md:p-5">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
|
UI Designer
|
|
</h3>
|
|
<p className="text-sm text-secondary-content/50">
|
|
37 job positions
|
|
</p>
|
|
</div>
|
|
<div className="ps-3">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
|
|
{/* <!-- Card --> */}
|
|
<a
|
|
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
<div className="p-4 md:p-5">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
|
Apps
|
|
</h3>
|
|
<p className="text-sm text-secondary-content/50">
|
|
2 job positions
|
|
</p>
|
|
</div>
|
|
<div className="ps-3">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
|
|
{/* <!-- Card --> */}
|
|
<a
|
|
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
<div className="p-4 md:p-5">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
|
Content Writer
|
|
</h3>
|
|
<p className="text-sm text-secondary-content/50">
|
|
10 job positions
|
|
</p>
|
|
</div>
|
|
<div className="ps-3">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
|
|
{/* <!-- Card --> */}
|
|
<a
|
|
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
<div className="p-4 md:p-5">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
|
Analytics
|
|
</h3>
|
|
<p className="text-sm text-secondary-content/50">
|
|
14 job positions
|
|
</p>
|
|
</div>
|
|
<div className="ps-3">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
</div>
|
|
{/* <!-- End Grid --> */}
|
|
</div>
|
|
{/* <!-- End Card Section --> */}
|
|
</>
|
|
```
|