Rapidly develop and deploy using Tailwind CSS UI components

Accelerate your workflow with attractive, responsive UI components and contemporary website templates, all completely free and open-source.

Star on GitHub

Materialise your ideas into reality.

Covo Components provides all the essential elements required to turn your idea into a visually appealing startup.

Beautifully designed
Covo Components allows you to build beautiful and modern websites regardless of your design skills.
Fully Responsive
Responsive designed components and templates that look great on any screen.
Customizable
copy and paste into your apps and experience the power of customizable components.

Use your favorite framework

Copy and paste the components you want with your favorite JS framework

const members = [
  {
    avatar: 'https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg',
    name: 'John Lorin',
    email: 'john@example.com',
  },
  {
    avatar: 'https://randomuser.me/api/portraits/men/86.jpg',
    name: 'Chris Bondi',
    email: 'chrisbondi@example.com',
  },
  {
    avatar: 'https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Yasmine',
    email: 'yasmine@example.com',
  },
  {
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f',
    name: 'Joseph',
    email: 'joseph@example.com',
  },
];
export default function Team() {
  return (
    <div className="max-w-2xl mx-auto px-4">
      <div className="items-start justify-between sm:flex">
        <div>
          <h4 className="text-gray-800 text-xl font-semibold">Team Members</h4>
          <p className="mt-2 text-gray-600 text-base sm:text-sm">Give your team members access to manage the system.</p>
        </div>
        <a href="#" className="inline-flex items-center justify-center gap-1 py-2 px-3 mt-2 font-medium text-sm text-center text-white bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg sm:mt-0">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
          </svg>
          New Member
        </a>
      </div>
      <ul className="mt-12 divide-y">
        {members.map((item, idx) => (
          <li key={idx} className="py-5">
            <div className="flex gap-3">
              <img src={item.avatar} className="flex-none w-12 h-12 rounded-full" alt={item.name} />
              <div>
                <span className="block text-sm text-gray-700 font-semibold">{item.name}</span>
                <span className="block text-sm text-gray-600">{item.email}</span>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}