Card

A customizable card component with different variant.

Galaxy Card

A ticket into the galaxy.

Preview

07th July 1997

Exploring the Unknown: The Alien Encounter Chronicles

Deep in the vastness of space lies a story untold—of strange beings, otherworldly landscapes, and encounters that defy imagination. Discover the mysteries of alien civilizations, their technology, and the secrets they carry across galaxies.

import React from "react";

const Card = () => {
  return (
    <section className="overflow-hidden rounded-lg shadow w-[320px]">
      <img
        alt=""
        src="/images/alien1.avif"
        width={100}
        height={100}
        className="h-56 w-full object-cover"
      />

      <div className="bg-white p-4 sm:p-6">
        <time dateTime="1997-07-07" className="block text-xs text-gray-500">
          07th July 1997
        </time>

        <a href="#">
          <h3 className="mt-0.5 text-lg text-gray-900">
            Exploring the Unknown: The Alien Encounter Chronicles
          </h3>
        </a>

        <p className="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
          Deep in the vastness of space lies a story untold—of strange beings,
          otherworldly landscapes, and encounters that defy imagination.
          Discover the mysteries of alien civilizations, their technology, and
          the secrets they carry across galaxies.
        </p>
      </div>
    </section>
  );
};

export default Card;

Usage Example

import React from "react";
import Card from "./components/comp/Card/GalaxyCard";

const App = () => {
  return (
    <div>
      <Card />
    </div>
  );
};

export default App;

Earth Card

A ticket for navigating on the earth surface.

Preview

07th July 1997

Exploring the Unknown: The Alien Encounter Chronicles

import React from "react";

const Card = () => {
  return (
    <section className="relative overflow-hidden rounded-lg shadow w-[320px]">
      <img
        alt=""
        src="/images/alien1.avif"
        width={100}
        height={100}
        className="absolute h-full w-full object-cover"
      />

      <div className="relative pt-32 sm:pt-48 lg:pt-64">
        <div className="p-4 sm:p-6">
          <time dateTime="1997-07-07" className="block text-xs text-white/90">
            07th July 1997
          </time>

          <a href="#">
            <h3 className="mt-0.5 text-lg text-white">
              Exploring the Unknown: The Alien Encounter Chronicles
            </h3>
          </a>

          <p className="mt-2 line-clamp-3 text-sm/relaxed text-white/95">
            Deep in the vastness of space lies a story untold—of strange beings,
            otherworldly landscapes, and encounters that defy imagination.
            Discover the mysteries of alien civilizations, their technology, and
            the secrets they carry across galaxies.
          </p>
        </div>
      </div>
    </section>
  );
};

export default Card;

Usage Example

import React from "react";
import Card from "./components/comp/Card/EarthCard";

const App = () => {
  return (
    <div>
      <Card />
    </div>
  );
};

export default App;

Jupiter Card

A VIP ticket for entering jupiter.

Preview

Open-Source Contributions

Alien UI is open-source, inviting developers to collaborate and share components to improve mobile app design.

import React from "react";
import { MdJoinInner } from "react-icons/md";

const Card = () => {
  return (
    <div className="flex flex-col items-center text-center bg-black p-7 shadow-md w-[300px] h-72">
      <MdJoinInner className="w-14 h-14 pb-4 text-white" />
      <h3 className="text-lg font-bold text-white">
        Open-Source Contributions
      </h3>
      <p className="text-white mt-2 text-center">
        Alien UI is open-source, inviting developers to collaborate and share
        components to improve mobile app design.
      </p>
    </div>
  );
};

export default Card;

Usage Example

import React from "react";
import Card from "./components/comp/Card/JupiterCard";

const App = () => {
  return (
    <div>
      <Card />
    </div>
  );
};

export default App;

Pluto Card

A small regular ticket into pluto.

Preview

Bar chart showing energy usage

import React from "react";
import { FaChartBar } from "react-icons/fa";

const Card = () => {
  return (
    <div className="w-3/5 h-52 bg-black p-6">
      <div className="flex items-center justify-center w-12 h-12 bg-white rounded-full mb-6">
        <FaChartBar className="text-black" size={24} />
      </div>
      <p className="text-lg text-white font-bold">
        Bar chart showing energy usage
      </p>
    </div>
  );
};

export default Card;

Usage Example

import React from "react";
import Card from "./components/comp/Card/PlutoCard";

const App = () => {
  return (
    <div>
      <Card />
    </div>
  );
};

export default App;