Basic
0,99 € /Monat
- 1 Domain inklusive
- 2 GB Speicher
- Basic Support
- 5 Postfächer
Tailwind Components
A comprehensive design system built with Tailwind CSS and Lucide icons
Buttons
Interactive elements for user actions
Link Buttons with Arrows
Text links and button-style links with directional indicators
Text Links
Button Style Links
Arrow Variations
Badges
Status indicators and labels
Default Success Warning Danger
Info Boxes
Highlighted content sections with different emphasis levels
Tariff Cards
Pricing and feature cards
Bestseller
Pro
4,99 € /Monat
- 3 Domains inklusive
- 50 GB Speicher
- Priority Support
- Unbegrenzte Postfächer
- Free SSL
Premium
Enterprise
19,99 € /Monat
- Unlimited Domains
- 1 TB Speicher
- 24/7 Premium Support
- Dedicated Manager
- Advanced Security
Cards
Content containers with various styles
Default Card
This is a basic card component. Perfect for containing any type of content.
Clickable Card
This card is a link and has hover effects.
Highlight Card
This card has a green gradient background for emphasis.
Provider Cards
Service provider information cards
Preis-Leistungs-Sieger
Goneo
ab 0,49 € /Monat
- 15-60 GB Speicher
- ∞ Postfächer
- Domain inklusive
IONOS
ab 1 € /Monat
- 2 GB Speicher
- 1-25 Postfächer
- Domain inklusive
Strato
ab 2 € /Monat
- 2 GB pro Postfach
- 25 Postfächer
- 1 Monat kostenlos
Layout Components
Container and grid layout utilities
Container
Small Container (max-w-3xl)
Medium Container (max-w-5xl)
Large Container (max-w-7xl) - Default
Grid
1
2
3
4
Recommendation Box
Featured recommendation display
Test Cards
Review and test result cards
CTA Sections
Call-to-action sections with gradients
Direkt zum Vergleich?
In unserer interaktiven Vergleichstabelle können Sie alle Anbieter nach Preis, Speicherplatz und Funktionen sortieren.
Zum Anbieter-Vergleich →Bereit für Ihre eigene E-Mail?
Finden Sie den perfekten E-Mail-Anbieter für Ihre Bedürfnisse.
Jetzt starten →Breadcrumb
Navigation breadcrumb trails
Typography
Text styles and hierarchy
Heading 1
text-4xl font-bold
Heading 2
text-3xl font-bold
Heading 3
text-2xl font-semibold
Heading 4
text-xl font-semibold
Body text - Regular paragraph with normal weight and size.
text-base (default)
Small text - Used for captions, metadata, and secondary information.
text-sm text-gray-600
Large text - For emphasis and important content.
text-lg font-medium
Bold text
Semibold text
Medium text
Normal text
Color Palette
Brand colors and design tokens
Primary Colors
Primary
bg-primary / #3aa7ea
Primary Dark
bg-primary-dark / #2c89c7
Brand Colors
Green
bg-brand-green / #059688
Yellow
bg-brand-yellow / #ffbe3c
Red
bg-brand-red / #ef5858
Blue Dark
bg-brand-blue-dark / #0a273d
Background Colors
Background
bg-bg / #f8f8f8
White
bg-bg-white / #ffffff
Blue Light
bg-bg-blue-light / #def2ff
Mint Light
bg-bg-mint-light / #e8f5e9
Beige Light
bg-bg-beige-light / #fff8e1
Tables
Data presentation and comparison
| Anbieter | Preis | Speicher | Postfächer |
|---|---|---|---|
| Goneo | 0,49 € | 15-60 GB | Unbegrenzt |
| IONOS | 1,00 € | 2 GB | 1-25 |
| Strato | 2,00 € | 2 GB pro Postfach | 25 |
Spacing & Layout
Spacing utilities and layout patterns
Gap Examples
gap-2
gap-2
gap-2
gap-4
gap-4
gap-4
gap-8
gap-8
gap-8
Padding Examples
p-2
p-4
p-6
p-8
Border Radius
rounded-none
rounded
rounded-lg
rounded-xl
rounded-full
Lists
Ordered, unordered, and custom styled lists
Unordered Lists
Default
- First item
- Second item
- Third item with longer text to show wrapping
Outside markers
- First item
- Second item
- Third item
No markers
- • First item
- • Second item
- • Third item
Square markers
- First item
- Second item
- Third item
Ordered Lists
Default (decimal)
- First step
- Second step
- Third step with longer text to demonstrate wrapping behavior
Outside markers
- First step
- Second step
- Third step
Lowercase letters
- Option A
- Option B
- Option C
Roman numerals
- Chapter I
- Chapter II
- Chapter III
Custom Styled Lists
Checkmark list (green)
- ✓ Feature included
- ✓ Another feature
- ✓ Premium support
Cross list (red)
- ✗ Feature not available
- ✗ Limited support
- ✗ No custom domain
Arrow list
- → Navigate to settings
- → Configure options
- → Save changes
Numbered with custom style
- 1 First important step
- 2 Second important step
- 3 Final step
Nested Lists
Nested unordered
- Main item 1
- Main item 2
- Sub item 2.1
- Sub item 2.2
- Main item 3
Mixed nested
- First category
- Sub point A
- Sub point B
- Second category
- Sub point C
Button States & Variations
Additional button styles and states
With Icons
Disabled States
Sidebar
Navigation and content sidebars
Sticky Navigation Sidebar
Sidebar with Title
Simple List Sidebar
Quick Links
Sidebar with Icons
Categories
Tabs
Tabbed navigation for organizing content
Default Tabs
Tab content goes here. This is the content for the active tab.
Pill Style Tabs
Content for the selected tab filter.
Underline Tabs
Content for the active tab with underline indicator.
FAQ Component
Accordion-style frequently asked questions
Welches Potential birgt eine professionelle E-Mail Adresse für Business-Inhaber und Gründer?
Eine "Free-Mail Adresse" wie "Robert.Ka1980@free-Mail.de" ist im Business-Bereich ein absolutes No-Go. Der erste Eindruck zählt – ob bei Rechnungsversand, Kooperationsanfragen oder der Präsentation Ihrer Kontaktdaten auf Ihrer Online-Präsenz.
Als Unternehmer kommunizieren Sie häufig mit Personen, die Sie nicht persönlich kennen und die Ihr professionelles Auftreten ausschließlich anhand Ihrer Online-Präsenz und Ihres Kommunikationsstils beurteilen. Ihre E-Mail-Adresse entscheidet darüber, ob Vertrauen entsteht oder Skepsis geweckt wird.
Ist es möglich, die eigene E-Mail Adresse später noch zu ändern?
Ja, in den meisten Fällen können Sie Ihre E-Mail-Adresse später ändern. Die genauen Möglichkeiten hängen von Ihrem gewählten Anbieter und Tarif ab. Einige Anbieter erlauben die Änderung der lokalen Adresse (vor dem @), während die Domain-Adresse normalerweise unverändert bleibt.
Was kostet E-Mail-Hosting?
Die Preise für E-Mail-Hosting variieren je nach Anbieter und Tarif. Einsteigertarife beginnen bereits ab 0,49 € pro Monat, während professionelle Lösungen mit mehr Speicherplatz und Funktionen zwischen 2-10 € pro Monat kosten können.
Kann ich meine eigene Domain verwenden?
Ja, die meisten E-Mail-Hosting-Anbieter unterstützen die Verwendung Ihrer eigenen Domain. Sie können Ihre bestehende Domain mit dem E-Mail-Service verbinden oder eine neue Domain beim Anbieter registrieren.
Usage Examples
Code snippets for implementing components
<!-- Button -->
<Button variant="primary">Click me</Button>
<Button href="/link" variant="secondary">Go somewhere</Button>
<!-- Badge -->
<Badge variant="success">New</Badge>
<!-- InfoBox -->
<InfoBox variant="light" title="Quick Tip">
<p>Your content here...</p>
</InfoBox>
<!-- TariffCard -->
<TariffCard
title="Pro"
price="9,99 €"
featured={true}
badge="Popular"
features={['Feature 1', 'Feature 2']}
href="https://example.com"
/>
<!-- Breadcrumb -->
<Breadcrumb items={[
{ label: 'Home', href: '/' },
{ label: 'Email Hosting', href: '/email-hosting/' }
]} />