Editorial Typography Sign In

signin

High-contrast editorial typography focus with minimal input lines.

#signin#editorial#typography#clean

Live Interactive Preview

Issue № 42

Subscriber Portal Authentication

Component Source Code

Select language in the dropdown

EditorialLogin.tsx

1'use client';
2
3import React from 'react';
4import { ArrowUpRight } from 'lucide-react';
5
6export default function EditorialLogin() {
7  return (
8    <div className="w-full max-w-md rounded-2xl border-2 border-slate-900 dark:border-slate-100 bg-amber-50/40 dark:bg-slate-900 p-6 sm:p-8 font-serif shadow-[6px_6px_0px_0px_rgba(15,23,42,1)] dark:shadow-[6px_6px_0px_0px_rgba(248,250,252,1)] transition-colors">
9      <div className="border-b-2 border-slate-900 dark:border-slate-100 pb-4 mb-6">
10        <h2 className="text-2xl sm:text-3xl font-black italic tracking-tight text-slate-900 dark:text-slate-100">Issue № 42</h2>
11        <p className="font-sans text-xs text-slate-600 dark:text-slate-400 uppercase tracking-widest mt-1">Subscriber Portal Authentication</p>
12      </div>
13
14      <form onSubmit={(e) => e.preventDefault()} className="space-y-4 font-sans">
15        <div>
16          <label className="block text-xs uppercase font-bold tracking-wider text-slate-900 dark:text-slate-100 mb-1">Email Address</label>
17          <input
18            type="email"
19            placeholder="editor@journal.org"
20            className="w-full border-b-2 border-slate-900 dark:border-slate-100 bg-transparent py-2 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-400 outline-none focus:border-amber-600 dark:focus:border-amber-400 transition"
21          />
22        </div>
23
24        <div>
25          <label className="block text-xs uppercase font-bold tracking-wider text-slate-900 dark:text-slate-100 mb-1">Passcode</label>
26          <input
27            type="password"
28            placeholder="••••••••"
29            className="w-full border-b-2 border-slate-900 dark:border-slate-100 bg-transparent py-2 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-400 outline-none focus:border-amber-600 dark:focus:border-amber-400 transition"
30          />
31        </div>
32
33        <button className="flex w-full items-center justify-between border-2 border-slate-900 dark:border-slate-100 bg-slate-900 dark:bg-slate-100 py-3 px-4 font-sans text-xs uppercase font-bold tracking-widest text-white dark:text-slate-900 transition hover:bg-transparent hover:text-slate-900 dark:hover:text-slate-100 active:scale-98">
34          <span>Enter Edition</span>
35          <ArrowUpRight className="h-4 w-4" />
36        </button>
37      </form>
38    </div>
39  );
40}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/signin/EditorialLogin.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import EditorialTypographySignIn from '@/components/signin/EditorialLogin';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <EditorialTypographySignIn />
7    </main>
8  );
9}