3D Earbuds

"use client"
import React from 'react';
 
export const Earbuds = () => {
  return (
    <div>
      <div className="relative w-[270px] h-[220px] bg-[#e8e9eb] rounded-[70px] shadow-[inset_0px_35px_25px_#ffffffe0,inset_10px_0px_25px_#0000004b,inset_40px_0px_20px_#ffffff,inset_-10px_0px_25px_#0000004b,inset_-40px_0px_20px_#fff,inset_0px_10px_10px_#000000e0,inset_0px_-15px_25px_#00000036,10px_25px_40px_-10px_#00000060]">
        <div className="absolute top-[30%] left-1/2 -translate-x-1/2 translate-y-[30%] w-[150px] h-[20px] rounded-[200px] bg-gradient-to-b from-[#d6d6d6] to-white" />
        <div className="absolute top-[37%] left-1/2 -translate-x-1/2 translate-y-[30%] w-full h-[2px] bg-[#b4b2b2] before:content-[''] before:absolute before:right-0 before:w-[5%] before:h-[2px] before:bg-white after:content-[''] after:absolute after:w-[5%] after:h-[2px] after:bg-white" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-[30%] w-[7px] aspect-square bg-[#66f66f] rounded-[100px] shadow-[0_0_6px_#3eff4b]" />
        <div className="absolute bottom-[25%] left-1/2 -translate-x-1/2 translate-y-[30%] text-center mt-[70px] text-[#00000036] font-bold">edithspaceUI</div>
      </div>
    </div>
  );