CodeHarem

The Ultimate Code
Hub & Developer
Playground

CodeHarem is a community code hub where developers browse, build, and share open-source UI components — buttons, cards, loaders, and more.

<div>
  <h1>
    The <span class="highlight">Ultimate</span>
    Code Hub & 
    <span class="highlight">Developer</span>
    Playground
  </h1>
</div>
h1 {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.2;
}

Popular Components

Hand-built UI you can copy and use anywhere.

CSS
View Component

Glassmorphism Pricing Card

C
CodeHarem
2103card
Tailwind
View Component

Tailwind Feature Card

C
CodeHarem
1556card
CSS
View Component

Glowing Gradient Button

A
Ansari Afroz
1284buttons
CSS
View Component

Accessible Accordion

C
CodeHarem
1190accordion
CSS
View Component

Animated Toggle Switch

A
Ansari Afroz
967switch
CSS
View Component

Dual Ring Spinner

A
Ansari Afroz
842spinner
CSS
View Component

Floating Label Input

A
Ansari Afroz
731input
CSS
View Component

Slide-in Toast Notification

A
Ansari Afroz
654toast
View all components

Browse by Category

Free copy-paste CSS components, organised by what you need.

CSS CardsCSS ButtonsCSS Spinners & LoadersCSS SwitchesCSS InputsCSS AccordionsCSS Toasts

Free copy-paste HTML & CSS components

CodeHarem is a free, open library of UI components built with plain HTML, CSS and Tailwind CSS. Every snippet works without a framework — copy the code, paste it into your project, and ship. Browse CSS buttons, cards, loaders and spinners, inputs and more, each with a live preview.

Prefer to build from scratch? The component sandbox gives you a live HTML, CSS and JavaScript editor with instant preview and one-click download. Want to learn more? Read the CodeHarem blog for practical frontend and CSS guides.

Frequently asked questions

What is CodeHarem?

CodeHarem is a free library of copy-paste HTML and CSS UI components — buttons, cards, loaders, forms and more — each with a live preview and one-click copy.

Are the UI components free to use?

Yes. Every component is free to copy and use in both personal and commercial projects.

Do I need React or any framework to use them?

No. The components are plain HTML and CSS, so they work in any project — static sites, React, Vue, WordPress, or anything that renders HTML.

Can I build and preview my own components?

Yes. The CodeHarem sandbox is a live HTML, CSS and JavaScript editor with an instant preview, and you can download your work as a standalone HTML file.