Make Every Moment Count

Listen while

Driving

Cooking

Commuting

Exercising

Relaxing

"use client"
const CssSnippet = () => {
  return (
    <div className="py-24">
      <div className="bg-[#272A30] rounded-2xl md:flex justify-between lg:mx-24 mx-5">
        <div className="text-white flex items-center justify-center w-full">
          <h1 className="text-base text-sm md:text-4xl">
            <div className="caption relative text-white p-5">
              <span>Make Every Moment Count</span>
              <div className="relative">
                Listen while
                <div className="text-box absolute inline-block ml-1 md:ml-2">
                  {["Driving","Cooking","Commuting","Exercising","Relaxing"].map((text, index) => (
                    <div key={index} className={\`left-0 absolute font-bold inline-block text-brand-500\`}>
                      {text}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </h1>
        </div>
      </div>
    </div>
  );
};
export default CssSnippet;