Card

export default function Component() {
  return (
    <>
      <!-- Basic Card -->
      <div className="w-64 p-5 bg-white dark:bg-[#1a1a1a] border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-sm">
        <h3 className="font-bold text-lg mb-2">Basic Card</h3>
        <p className="text-sm text-neutral-500 dark:text-neutral-400">Simple container for content with padding and a border.</p>
      </div>
      
      <!-- Action Card -->
      <div className="w-64 bg-white dark:bg-[#1a1a1a] border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-sm overflow-hidden">
        <div className="p-5">
          <h3 className="font-bold text-lg mb-1">Action Card</h3>
          <p className="text-sm text-neutral-500 dark:text-neutral-400">Contains actions at the bottom.</p>
        </div>
        <div className="bg-neutral-50 dark:bg-[#111] px-5 py-3 border-t border-neutral-200 dark:border-neutral-800 flex justify-end gap-2">
          <button className="px-3 py-1.5 text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white">Cancel</button>
          <button className="px-3 py-1.5 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700">Save</button>
        </div>
      </div>
      
      <!-- Image Card -->
      <div className="w-64 bg-white dark:bg-[#1a1a1a] border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-sm overflow-hidden">
        <img src="../../assets/images/sample.png;fit=crop&w=400&q=80" alt="Cover" className="w-full h-32 object-cover"/>
        <div className="p-4">
          <span className="text-[10px] font-bold tracking-wider uppercase text-blue-600">Design</span>
          <h3 className="font-bold text-base mt-1">Image Card</h3>
          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 line-clamp-2">A beautiful card with a cover image. Ideal for blogs or products.</p>
        </div>
      </div>
    </>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  template: `
<!-- Basic Card -->
<div class="w-64 p-5 bg-white dark:bg-[#1a1a1a] border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-sm">
  <h3 class="font-bold text-lg mb-2">Basic Card</h3>
  <p class="text-sm text-neutral-500 dark:text-neutral-400">Simple container for content with padding and a border.</p>
</div>

<!-- Action Card -->
<div class="w-64 bg-white dark:bg-[#1a1a1a] border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-sm overflow-hidden">
  <div class="p-5">
    <h3 class="font-bold text-lg mb-1">Action Card</h3>
    <p class="text-sm text-neutral-500 dark:text-neutral-400">Contains actions at the bottom.</p>
  </div>
  <div class="bg-neutral-50 dark:bg-[#111] px-5 py-3 border-t border-neutral-200 dark:border-neutral-800 flex justify-end gap-2">
    <button class="px-3 py-1.5 text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white">Cancel</button>
    <button class="px-3 py-1.5 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700">Save</button>
  </div>
</div>

<!-- Image Card -->
<div class="w-64 bg-white dark:bg-[#1a1a1a] border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-sm overflow-hidden">
  <img src="../../assets/images/sample.png;fit=crop&w=400&q=80" alt="Cover" class="w-full h-32 object-cover"/>
  <div class="p-4">
    <span class="text-[10px] font-bold tracking-wider uppercase text-blue-600">Design</span>
    <h3 class="font-bold text-base mt-1">Image Card</h3>
    <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1 line-clamp-2">A beautiful card with a cover image. Ideal for blogs or products.</p>
  </div>
</div>
  `
})
export class AngularComponent {}