DigiFi/digifi-SalaryLoan
1
0
Fork 0
Code Issues Pull Requests Releases Activity

hover transition added

Browse Source
This commit is contained in:
victorAnumudu
2025-02-03 08:22:01 +01:00
parent c9f80c5f41
commit 6d71eb13c1
3 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+4
View File
@@ -36,3 +36,7 @@
transform: rotate(360deg);
}
}
button, a {
cursor: pointer;
}
src/components/HomeCom.jsx
+7 -7
View File
@@ -13,26 +13,26 @@ export default function HomeCom() {
{data.map((item, index) => {
let color = item.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : item.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
return (
<div key={index} className="w-full p-3 sm:p-5 bg-white shadow flex flex-col gap-5">
<div key={index} className="w-full p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105">
<div className="mb-5 card-title w-[70%] mx-auto">
<h1 className="mb-[1px] text-2xl font-bold">{item.name}</h1>
<span className={` ${color} text-sm font-bold p-1 rounded`}>{item.place}</span>
</div>
<div className="card-body flex flex-col gap-2">
<div className="contact text-slate-400 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
<div className="contact text-slate-700 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<IoIosPhonePortrait />
</span>
<span>{item.contact}</span>
</div>
<div className="contact text-slate-400 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
<div className="contact text-slate-700 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<CiPhone />
</span>
<span>{item.contact}</span>
</div>
<div className="contact text-slate-400 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
<div className="contact text-slate-700 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<MdOutlineEmail />
</span>
<span>{item.email}</span>
src/index.css
+4
View File
@@ -2,6 +2,10 @@
@tailwind components;
@tailwind utilities;
*{
transition: all .3s;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',