Tailwind CSS React Data Display - Horizon UI

import Event from "components/dataDisplay/Event";
  <Event
    title="Design Strategy Workshop"
    time="03:00 PM - 04:00 PM"
    eventBg="bg-white"
    mb="mb-3"
  />

import OrderStep from "components/dataDisplay/OrderStep";
  <OrderStep
    title="Order Placed"
    subtitle="27 Jul 2022"
    bg="bg-white dark:!bg-navy-800"
    icon2={<MdCheck />}
    icon={<MdPointOfSale />}
    border="border-2 border-green-500"
  />

import SessionBadge from "components/dataDisplay/SessionBadge";
import Card from "components/card";
  
    <Card extra={"w-full py-4 px-8"}>
      {/* Header */}
      <div className="flex items-center justify-between">
        <h4 className="text-xl font-bold text-navy-700 dark:text-white">
          Session
        </h4>
      </div>
      {/* content */}
      <div>
        <SessionBadge
          name="Chrome, Bucharest 68.128.072.301"
          detail="EU"
          status="enabled"
          py=" py-[27px]"
          border="border-b"
          bgTextColor=" bg-green-100 dark:bg-green-50 text-green-500"
        />
 
        <SessionBadge
          name="Chrome MacOS (Your current session)"
          detail="EU"
          status="enabled"
          py=" py-[20px]"
          border="border-b"
          bgTextColor=" bg-green-100 dark:bg-green-50 text-green-500"
        />
 
        <SessionBadge
          name="Firefox on Desktop, Barcelona"
          detail="EU"
          status="enabled"
          py=" py-[20px]"
          border="border-b"
          bgTextColor=" bg-green-100 dark:bg-green-50 text-green-500"
        />
 
        <SessionBadge
          name="Safari on Iphone"
          detail="EU"
          status="disabled"
          py=" py-[20px]"
          bgTextColor=" bg-red-100 dark:bg-red-50 text-red-500"
        />
      </div>
    </Card>

import TimelineItem from "components/dataDisplay/SessionBadge";
import Card from "components/card";
 
    <Card extra={"w-full p-5"}>
      {/* Header */}
      <div>
        <h4 className="text-xl font-bold text-navy-700 dark:text-white">
          Timeline
        </h4>
        <p className="text-base font-medium text-gray-600">
          See your products in our timelines:
        </p>
      </div>
 
      {/* Timeline items */}
      <div className="mt-[30px]">
        <TimelineItem
          title="Meeting with a client"
          day="03"
          weekday="Wed"
          hours="10:30 - 12:00"
          current="current"
          mb="mb-[16px]"
        />
        <TimelineItem
          mb="mb-[16px]"
          title="Webinar - Marketing for Developers"
          day="12"
          weekday="Fri"
          hours="10:30 - 12:00"
        />
        <TimelineItem
          mb="mb-[16px]"
          title="Design UI and check sales on PayPal"
          day="16"
          weekday="Tue"
          hours="09:00 - 14:00"
        />
        <TimelineItem
          title="Configure table for Daily tasks on Notion"
          day="27"
          weekday="Sat"
          hours="20:00 - 22:30"
        />
      </div>
    </Card>

import Transaction from "components/dataDisplay/Transaction"; 
  <Transaction
    title="Drink Store"
    date="09 September 2022"
    sum="-$5.21"
    mb="mb-[20px]"
    icon={<MdLocalBar className="text-brand-500 dark:text-white" />}
  />

import Transfer from "components/dataDisplay/Transfer";
  <Transfer
    name="From Alex Manda"
    date="Today, 16:36"
    sum="+$50"
    avatar="/img/avatar2.png"
  />