Default
Misolda keltirilgan Iconlar <react-icons> dan olingan. Misolda keltirilgandek loyihangizda qo'llamoqchi bo'sangiz uni yuklab oling.
12
Segoe cute
Do you want to participate? Show code
import React from 'react';
import { BsHeartFill } from 'react-icons/bs';
import { RiMessage3Fill } from 'react-icons/ri';
import YourImage from './your-path/your-img.png';
export const Default = () => {
return (
<>
<div className="my-5 bg-white dark:bg-[#18191c] shadow-xl hover:shadow duration-200 rounded-xl">
<div className="relative w-full rounded-xl">
<img
className="rounded-xl hover:scale-105 duration-300"
src={YourImage}
alt="card image"
/>
<div className="absolute bottom-3 left-4 flex items-center space-x-2">
<span className="p-1.5 rounded-lg bg-white hover:bg-red-500 flex items-center justify-center w-fit duration-200 group">
<BsHeartFill className="text-sm text-red-500 group-hover:text-white" />
</span>
<span className="p-1.5 rounded-lg bg-white hover:bg-blue-500 flex items-center justify-center w-fit duration-200 space-x-1 group">
<RiMessage3Fill className="text-sm text-blue-500 group-hover:text-white" />
<small className="text-blue-500 group-hover:text-white">12</small>
</span>
</div>
</div>
<div className="p-4">
<h5 className="text-primary dark:text-white font-medium text-sm">
Segoe cute
</h5>
<small className="text-xs font-light text-primary dark:text-gray-400">
Do you want to participate?
</small>
</div>
</div>
</>
);
};
E-commerce
Misolda keltirilgan Iconlar <react-icons> dan olingan. Misolda keltirilgandek loyihangizda qo'llamoqchi bo'sangiz uni yuklab oling.
Show code
import React from 'react';
import { BsHeartFill } from 'react-icons/bs';
import { RiMessage3Fill } from 'react-icons/ri';
import YourImage from './your-path/your-img.png';
export const Commerce = () => {
return (
<>
<div className="my-5 bg-white dark:bg-[#18191c] shadow-xl hover:shadow duration-200 rounded-xl">
<div className="relative w-full rounded-xl">
<img
className="rounded-xl hover:scale-105 duration-300"
src={YourImage}
alt="card image"
/>
<div className="absolute bottom-3 left-4 flex items-center space-x-2">
<span className="p-1.5 rounded-lg bg-white hover:bg-red-500 flex items-center justify-center w-fit duration-200 group">
<BsHeartFill className="text-sm text-red-500 group-hover:text-white" />
</span>
<span className="p-1.5 rounded-lg bg-white hover:bg-blue-500 flex items-center justify-center w-fit duration-200 space-x-1 group">
<RiMessage3Fill className="text-sm text-blue-500 group-hover:text-white" />
<small className="text-blue-500 group-hover:text-white">12</small>
</span>
</div>
</div>
<div className="p-4">
<h5 className="text-primary dark:text-white font-medium text-sm">
Segoe cute
</h5>
<small className="text-xs font-light text-primary dark:text-gray-400">
Do you want to participate?
</small>
</div>
</div>
</>
);
};
Type A
Misolda keltirilgan Iconlar <react-icons> dan olingan. Misolda keltirilgandek loyihangizda qo'llamoqchi bo'sangiz uni yuklab oling.
12
Live a life of madness
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Show code
import React from 'react';
import { BsHeartFill } from 'react-icons/bs';
import { RiMessage3Fill } from 'react-icons/ri';
import YourImage from './your-path/your-img.png';
export const TypeA = () => {
return (
<>
<div className="flex bg-white dark:bg-[#18191c] shadow-xl hover:shadow rounded-xl hover:scale-105 duration-300">
<div>
<div className="relative w-full scale-100">
<img className="rounded-xl" src={YourImage} alt="card image" />
<div className="absolute bottom-3 left-4 flex items-center space-x-2">
<span className="p-1.5 rounded-lg bg-white hover:bg-red-500 flex items-center justify-center w-fit group duration-200">
<BsHeartFill className="text-sm text-red-500 group-hover:text-white" />
</span>
<span className="p-1.5 rounded-lg bg-white hover:bg-blue-500 flex items-center justify-center w-fit group duration-200 space-x-1">
<RiMessage3Fill className="text-sm text-blue-500 group-hover:text-white" />
<small className="text-blue-500 group-hover:text-white">
12
</small>
</span>
</div>
</div>
</div>
<div className="p-4">
<h5 className="text-primary dark:text-white font-medium text-sm">
Live a life of madness
</h5>
<small className="text-xs font-light text-primary dark:text-gray-400">
Lorem ipsum dolor sit <br /> amet consectetur, <br /> adipisicing
elit.
</small>
</div>
</div>
</>
);
};
Type B | Glassmorphism
Misolda keltirilgan Iconlar <react-icons> dan olingan. Misolda keltirilgandek loyihangizda qo'llamoqchi bo'sangiz uni yuklab oling.
12
Segoe cute
Do you want to participate? Show code
import React from 'react';
import { BsHeartFill } from 'react-icons/bs';
import { RiMessage3Fill } from 'react-icons/ri';
import YourImage from './your-path/your-img.png';
export const TypeB = () => {
return (
<>
<div className="relative my-5 bg-white dark:bg-[#18191c] shadow-xl hover:shadow duration-200 rounded-xl group">
<div className="relative w-full rounded-xl">
<img
className="rounded-xl group-hover:scale-105 duration-300"
src={YourImage}
alt="card image"
/>
<div className="absolute top-3 left-4 flex items-center space-x-2 cursor-pointer">
<span className="p-1.5 rounded-lg bg-white flex items-center justify-center w-fit duration-200 hover:-translate-y-1">
<BsHeartFill className="text-sm text-red-500" />
</span>
<span className="p-1.5 rounded-lg bg-white flex items-center justify-center w-fit duration-200 space-x-1 hover:-translate-y-1">
<RiMessage3Fill className="text-sm text-blue-500" />
<small className="text-blue-500">12</small>
</span>
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 rounded-b-xl bg-white bg-opacity-50 backdrop-filter backdrop-blur-sm p-4 group-hover:py-6 duration-300">
<h5 className="text-primary font-medium text-sm">
Segoe cute
</h5>
<small className="text-xs font-light text-primary">
Do you want to participate?
</small>
</div>
</div>
</>
);
};
Type C | Unilateral
Misolda keltirilgan Iconlar <react-icons> dan olingan. Misolda keltirilgandek loyihangizda qo'llamoqchi bo'sangiz uni yuklab oling.
Lazydev 1.0
Copy and paste
Show code
import React from 'react';
import { BsHeartFill } from 'react-icons/bs';
export const TypeC = () => {
return (
<>
<div className="w-[10rem] md:w-[13rem]">
<div className="relative hover:scale-105 duration-200">
<img
className="hidden dark:block rounded-r-3xl"
src="your-img-path.png"
alt=""
/>
<img
className="block dark:hidden rounded-r-3xl"
src="your-img-path.png"
alt=""
/>
<BsHeartFill className="absolute -top-2 -left-2 h-8 w-8 p-2 rounded-lg flex items-center justify-center bg-white shadow-lg dark:bg-primary text-[#ff4757] text-xl" />
</div>
<div className="flex flex-col items-start space-y-1 md:space-y-0 md:flex-row md:items-center justify-between">
<div>
<h5 className="text-primary dark:text-white font-semibold text-sm">
Lazydev 1.0
</h5>
<p className="text-xs text-primary font-medium dark:text-gray-400">
Copy and paste
</p>
</div>
<div className="flex items-center -space-x-3 cursor-pointer">
<span>
<img
className="w-8 rounded-full group-hover:scale-105 duration-200"
src="your-img-path.png"
title="Verified avatar user"
alt="default avatar rounded-full"
/>
</span>
<span>
<img
className="w-8 rounded-full group-hover:scale-105 duration-200"
src="your-img-path.png"
title="Unread messages"
alt="default avatar rounded-full"
/>
</span>
<span>
<img
className="w-8 rounded-full group-hover:scale-105 duration-200"
src="your-img-path.png"
title="Edit user"
alt="default avatar rounded-full"
/>
</span>
<span>
<img
className="w-8 rounded-full group-hover:scale-105 duration-200"
src="your-img-path.png"
title="Online user"
alt="default avatar rounded-full"
/>
</span>
</div>
</div>
</div>
</>
);
};
Type D | Button
Misolda keltirilgan Iconlar <react-icons> dan olingan. Misolda keltirilgandek loyihangizda qo'llamoqchi bo'sangiz uni yuklab oling.
8
Segoe cute
Do you want to participate in our initiative? Show code
import React from 'react';
export const TypeD = () => {
return (
<>
<div className="flex flex-col md:flex-row items-center space-x-4 p-2 md:p-3 rounded-xl shadow-lg bg-white">
<div className="relative w-fit hover:scale-105 duration-200 py-2 md:py-0">
<img
className="hidden dark:block w-20 h-20 rounded-3xl hover:scale-110 duration-300"
src="your-img-path.png"
alt="avatar"
/>
<img
className="block dark:hidden w-20 h-20 rounded-3xl"
src="your-img-path.png"
alt="avatar"
/>
<p className="absolute bottom-2 text-white -right-1 w-5 h-5 flex items-center justify-center p-2 text-xs rounded-2xl bg-[#ff4757]">
8
</p>
</div>
<div className="flex flex-col space-y-1 py-2 md:py-0">
<h5 className="text-primary dark:text-white font-medium text-sm">
Segoe cute
</h5>
<small className="text-xs font-lighttext-primary dark:text-gray-400">
Do you want to participate in our initiative?
</small>
<span className="space-x-2">
<button className="py-1 px-3 rounded-lg text-white bg-[#ff4757] text-[0.6rem] duration-300 hover:-translate-y-0.5">
Open
</button>
<button className="py-1 px-3 rounded-lg bg-white shadow-xl dark:bg-primary text-[0.6rem] duration-300 hover:-translate-y-1">
Cancel
</button>
</span>
</div>
</div>
</>
);
};
Subscribeto our Weekly Newsletter
Lazydev
About Lazy.dev
Why Lazy.dev?
FAQ
Resources
Documentation
GitHUb
Privacy
Help
Issues
FAQ
Copyright ©2023 Lazydev
Created By Anvarov