HOME
Some content.
Akkordeon
Akkordeon
In der Regel benötigen wir für die Aktivierung drei Werktage.
In der Regel benötigen wir für die Aktivierung drei Werktage.
In der Regel benötigen wir für die Aktivierung drei Werktage.
<div class="accordion">
<div class="accordion-item">
<button class="accordion-title border-gray-300">Wie viel Zeit wird in der Regel für die Bereitstellung benötigt?</button>
<div class="accordion-content">
<div class="wrapper p-2 border-b border-gray-300">
In der Regel benötigen wir für die Aktivierung drei Werktage.
</div>
</div>
</div>
<div class="accordion-item">
<button class="accordion-title border-gray-300">Wie viel Zeit wird in der Regel für die Bereitstellung benötigt?</button>
<div class="accordion-content">
<div class="wrapper p-2 border-b border-gray-300">
In der Regel benötigen wir für die Aktivierung drei Werktage.
</div>
</div>
</div>
<div class="accordion-item">
<button class="accordion-title border-gray-300">Wie viel Zeit wird in der Regel für die Bereitstellung benötigt?</button>
<div class="accordion-content">
<div class="wrapper p-2 border-b border-gray-300">
In der Regel benötigen wir für die Aktivierung drei Werktage.
</div>
</div>
</div>
</div>
Karten
Karte mit Hintergrundbild
<div class="w-full md:w-1/2 lg:w-1/3 mb-6">
<a href="#" class="card image-bg flex flex-col justify-end">
<div class="absolute inset-0"></div>
<img class="background-image" src="https://source.unsplash.com/random/500x500?sig=4"/>
<div class="relative text-white card-content space-top">
<p class="caps" itemprop="datePublished">20.12.19</p>
<h1 class="h5" itemprop="name">Lacus vel augue laoreet rutrum faucibus dolor</h1>
</div>
</a>
</div>
Karte mit Hintergrundbild und Verlauf
<div class="w-full md:w-1/2 lg:w-1/3 mb-6">
<a href="#" class="card image-bg flex flex-col justify-end">
<div class="bg-gradient absolute inset-0"></div>
<img class="background-image gradient-mask" src="https://source.unsplash.com/random/500x500?sig=3"/>
<div class="relative text-white card-content space-top">
<p class="caps" itemprop="datePublished">20.12.19</p>
<h1 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h1>
</div>
</a>
</div>
Karte mit farbigen Hintergrund
<div class="w-full md:w-1/2 lg:w-1/3 mb-6">
<a href="#" class="card solid flex flex-col justify-end">
<div class="solid-primary absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps" itemprop="datePublished">20.12.19</p>
<h1 class="h5" itemprop="name">Solid lacus vel augue laoreet rutrum faucibus dolor</h1>
</div>
</a>
</div>
Karte mit farbigen Outline
<div class="w-full md:w-1/2 lg:w-1/3 mb-6">
<a href="#" class="card outline h-full flex">
<div class="inner w-full flex bg-white items-end">
<div class="text-section card-content space-top">
<p class="caps" itemprop="datePublished">20.12.19</p>
<h1 class="h5" itemprop="name">Outline: Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor</h1>
</div>
</div>
</a>
</div>
Karte mit Verlauf
<div class="w-full md:w-1/2 lg:w-1/3 mb-6">
<a href="#" class="card solid flex flex-col justify-end">
<div class="bg-gradient absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps" itemprop="datePublished">20.12.19</p>
<h1 class="h5" itemprop="name">Solid lacus vel augue laoreet rutrum faucibus dolor</h1>
</div>
</a>
</div>
Karte mit Verlauf Outline
<div class="w-full md:w-1/2 lg:w-1/3 mb-6">
<a href="#" class="card outline-gradient gradient-text h-full flex">
<div class="inner w-full flex bg-white items-end">
<div class="text-section card-content text-gradient space-top">
<p class="caps" itemprop="datePublished">20.12.19</p>
<h1 class="h5" itemprop="name">Outline: Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor</h1>
</div>
</div>
</a>
</div>
Kontaktkarte
Kundencenter der Stadtwerke Schweinfurt
<div class="w-full md:w-1/2">
<div class="person-list-item mx-3 my-3">
<div class="card outline h-full flex">
<div class="inner w-full flex bg-white items-start">
<div class="card-content sm:flex w-full">
<div class="person-left sm:w-1/3 mt-5 sm:flex flex-col justify-center">
<div class="person-image">
<img class="rounded-full lazyloaded" src="https://source.unsplash.com/random/500x500?sig=8">
</div>
</div>
<div class="person-right sm:w-2/3 sm:flex flex-col justify-center mt-5 sm:pl-10">
<h1 class="h5 mb-2">
<span class="person-given-name">Kundencenter der Stadtwerke Schweinfurt </span>
<span class="person-family-name"></span>
</h1>
<div class="person-contact mb-0 text-s">
<a href="tel:09721931400" class="person-phone mb-1 block"><i class="fal fa-phone mr-2"></i>09721 931-400</a>
<a href="#" class="person-email mb-1 block"><i class="fal fa-envelope mr-2"></i>info@stadtwerke-sw.de</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Navigation
Breadcrumb
<div class="breadcrumb text-section">
<ul class="breadcrumb">
<li class="normal">
<a href="">Stadtwerke Schweinfurt</a>
</li>
<li class="current">
Kundencenter der Stadtwerke im Herzen der Stadt
</li>
</ul>
</div>
Kacheln
Pricing Card Best
<div class="row flex flex-col sm:w-1/3 mb-6 sm:mb-0">
<a href="#" class="card outline-gradient pricing-best h-full flex flex-col" itemtype="http://schema.org/Article">
<h2 class="text-white">RegioNet 1000</h2>
<div class="inner w-full bg-white items-end">
<div class="text-section card-content">
<p class="pricing-border-bottom">Internetanbindung (Download) 100 Mbit/s<br>Upload 40/6* Mbit/s<br>inkl. Fritz!Box<br>Internet-Flatrate<br>Rufnummerübernahme<br>Zweite Festnetznummer<br>zusätzliche Telefonflatrate 5€</p>
<div class="pricing-border-bottom">
<p class="h4 text-primary"><strong>19,90 €</strong></p>
<p class="text-assistive">Preis pro Monat<br>für die ersten 12 Monate danach <br>31,95 € für Energiekunden der Stadtwerke Schweinfurt<br>sonst 34,95 €</p>
</div>
<div class="button solid gradient medium">Verfügbarkeit prüfen</div>
</div>
</div>
</a>
</div>
Pricing Card Standard
<div class="row flex flex-col sm:w-1/3 mb-6 sm:mb-0">
<a href="#" class="card outline pricing-standard h-full flex flex-col" itemtype="http://schema.org/Article">
<div class="pricing-card-headline-container">
<h2 class="pricing-card-headline h3">RegioNet 50</h2>
</div>
<div class="inner">
<div class="text-section card-content">
<p class="pricing-border-bottom pricing-border-top pricing-p">Internetanbindung (Download) 50 Mbit/s<br>Upload 20/4* Mbit/s<br>inkl. Fritz!Box<br>Internet-Flatrate<br>Rufnummerübernahme<br>Zweite Festnetznummer<br>zusätzliche Telefonflatrate 10€</p>
<div class="pricing-border-bottom pricing-container">
<p class="h4 pricing-container-price"><strong>19,90 €</strong></p>
<p class="text-assistive">Preis pro Monat<br>für die ersten 12 Monate danach <br>21,95 € für Energiekunden der Stadtwerke Schweinfurt<br>sonst 24,95 €</p>
</div>
<div class="button outline primary medium">Verfügbarkeit prüfen</div>
</div>
</div>
</a>
</div>
Preisrechner
Energie-Formular
Personen im Haushalt
<div class="form-energy">
<div>
<div class="range-container">
<div class="range-description">
<i class="far fa-user text-primary"></i>
<p>Personen im Haushalt</p>
<i class="far fa-users text-primary"></i>
</div>
<input type="range" class="input" name="test" min="1300" max="4200" step="100" value="2700" oninput="let outputEl=document.querySelector('output[for=\'idOfRangeSlider\']'); outputEl.innerHTML=this.value.toString()"/>
<output style="left: 613px;">2</output>
</div>
</div>
<div class="w-full">
<div class="inline-flex flex-column justify-center mr-5">
<input type="radio" class="input" name="kunde" value="1" id="privatkunde">
<label for="privatkunde" class="input-radio">
<span class="custom-radio">Privatkunde</span>
</label>
</div>
<div class="inline-flex flex-column justify-center mr-5">
<input type="radio" class="input" name="kunde" value="1" id="gewerbekunde">
<label for="gewerbekunde" class="input-radio">
<span class="custom-radio">Gewerbekunde</span>
</label>
</div>
</div>
<div class="w-full">
<div class="w-full consumption-kwh">
<div class="form-clearfix clearfix">
<div class="form-group">
<input placeholder="kWh" class="input w-full" type="text">
</div>
</div>
</div>
</div>
<div class="w-full">
<div class="w-full consumption-kwh">
<div class="form-clearfix clearfix">
<div class="form-group">
<input placeholder="PLZ" class="input w-full" type="text">
</div>
</div>
</div>
</div>
<div class="w-full">
<div class="w-full consumption-kwh">
<div class="form-clearfix clearfix">
<div class="form-group">
<input placeholder="Stadt" class="input w-full" type="text">
</div>
</div>
</div>
</div>
<div class="w-full text-right">
<button value="" type="submit" class="button solid primary medium mt-2">Tarif berechnen</button>
</div>
</div>
Gas-Formular
Wohnfläche in qm
<div class="form-gas">
<div>
<div class="range-container">
<div class="range-description">
<i class="far fa-house fa-xs text-primary"></i>
<p>Wohnfläche in qm</p>
<i class="far fa-house text-primary"></i>
</div>
<input type="range" class="input" name="test" min="1300" max="4200" step="100" value="2700" oninput="let outputEl=document.querySelector('output[for=\'idOfRangeSlider\']'); outputEl.innerHTML=this.value.toString()"/>
<output style="left: 613px;">86</output>
</div>
</div>
<div class="w-full">
<div class="inline-flex flex-column justify-center mr-5">
<input type="radio" class="input" name="gas" value="2" id="privatkunde">
<label for="privatkunde" class="input-radio">
<span class="custom-radio">Privatkunde</span>
</label>
</div>
<div class="inline-flex flex-column justify-center mr-5">
<input type="radio" class="input" name="gas" value="2" id="gewerbekunde">
<label for="gewerbekunde" class="input-radio">
<span class="custom-radio">Gewerbekunde</span>
</label>
</div>
</div>
<div class="w-full">
<div class="w-full consumption-kwh">
<div class="form-clearfix clearfix">
<div class="form-group">
<input placeholder="kWh" class="input w-full" type="text">
</div>
</div>
</div>
</div>
<div class="w-full">
<div class="w-full consumption-kwh">
<div class="form-clearfix clearfix">
<div class="form-group">
<input placeholder="PLZ" class="input w-full" type="text">
</div>
</div>
</div>
</div>
<div class="w-full">
<div class="w-full consumption-kwh">
<div class="form-clearfix clearfix">
<div class="form-group">
<input placeholder="Stadt" class="input w-full" type="text">
</div>
</div>
</div>
</div>
<div class="w-full text-right">
<button value="" type="submit" class="button solid primary medium mt-2">Tarif berechnen</button>
</div>
</div>
Telekommunikations-Formular
Geschwindigkeit
<div class="form-telecommunication">
<div>
<div class="range-container">
<div class="range-description">
<i class="far fa-rocket text-primary"></i>
<p>Geschwindigkeit</p>
<i class="far fa-space-shuttle fa-rotate-270 text-primary"></i>
</div>
<input type="range" class="input" name="test" min="1300" max="4200" step="100" value="2700" oninput="let outputEl=document.querySelector('output[for=\'idOfRangeSlider\']'); outputEl.innerHTML=this.value.toString()"/>
<output style="left: 613px;">200</output>
</div>
</div>
<div class="w-full">
<div class="select-wrapper">
<select name="postleitzahl" id="postleitzahl" required="required" class="input w-full">
<option value selected="selected" disabled="disabled">Postleitzahl</option>
<option value="96047">96047 Bamberg</option>
<option value="97421">97421 Schweinfurt</option>
</select>
</div>
</div>
<div class="sm:flex w-full">
<div class="w-full sm:w-1/2 sm:pr-2">
<div class="form-clearfix clearfix">
<div class="form-group">
<input placeholder="Straße" class="input" type="text">
</div>
</div>
</div>
<div class="w-full sm:w-1/2 sm:pr-2">
<div class="form-clearfix clearfix">
<div class="form-group">
<input placeholder="Hausnummer" class="input" type="text">
</div>
</div>
</div>
</div>
<div class="w-full text-right">
<button value="" type="submit" class="button solid primary medium mt-2">Verfügbarkeit prüfen</button>
</div>
</div>
</div>
Slider
Karten als Slider
<div class="max-w-screen-xl swiper-container-default mx-auto w-full overflow-visible mb-10">
<div class="mx-3 mb-5 flex justify-end">
<div class="slider-button slider-button-prev rounded-full inline-block m-1">
<div class="inner w-8 h-8 rounded-full bg-white">
<div class="text-primary flex w-full h-full items-center justify-center"><i class="far fa-chevron-left"></i></div>
</div>
</div>
<div class="slider-button slider-button-next rounded-full inline-block m-1">
<div class="inner w-8 h-8 rounded-full bg-white">
<div class="text-primary flex w-full h-full items-center justify-center"><i class="far fa-chevron-right"></i></div>
</div>
</div>
</div>
<div class="slider-wrapper mx-3">
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="absolute inset-0"></div>
<img class="background-image gradient" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=1"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card solid-color flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="solid-primary absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="absolute inset-0"></div>
<img class="background-image gradient" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=3"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="absolute inset-0"></div>
<img class="background-image gradient" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=4"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="absolute inset-0"></div>
<img class="background-image gradient" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=5"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="absolute inset-0"></div>
<img class="background-image gradient" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=6"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h4" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
</div>
<div class="mx-3 mb-5">
<div class="slider-pagination"></div>
</div>
</div>
Karten mit Verlauf als Slider
<div class="max-w-screen-xl swiper-container-default mx-auto w-full overflow-visible mb-10">
<div class="mx-3 mb-5 flex justify-end">
<div class="slider-button-gradient slider-button-prev rounded-full inline-block m-1">
<div class="inner w-8 h-8 rounded-full bg-white">
<div class="bg-gradient text-gradient flex w-full h-full items-center justify-center"><i class="far fa-chevron-left"></i></div>
</div>
</div>
<div class="slider-button-gradient slider-button-next rounded-full inline-block m-1">
<div class="inner w-8 h-8 rounded-full bg-white">
<div class="bg-gradient text-gradient flex w-full h-full items-center justify-center"><i class="far fa-chevron-right"></i></div>
</div>
</div>
</div>
<div class="slider-wrapper mx-3">
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="bg-gradient absolute inset-0"></div>
<img class="background-image gradient-mask" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=1"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="bg-gradient absolute inset-0"></div>
<img class="background-image gradient-mask" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=2"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="bg-gradient absolute inset-0"></div>
<img class="background-image gradient-mask" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=3"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="bg-gradient absolute inset-0"></div>
<img class="background-image gradient-mask" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=4"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="bg-gradient absolute inset-0"></div>
<img class="background-image gradient-mask" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=5"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<a href="#" class="card image-bg flex flex-col justify-end" itemscope itemtype="http://schema.org/Article">
<div class="bg-gradient absolute inset-0"></div>
<img class="background-image gradient-mask" width="500" height="500" src="https://source.unsplash.com/random/500x500?sig=6"/>
<div class="relative text-white card-content space-top">
<p class="caps" >Das ist eine Dachzeile</p>
<h4 class="h5" itemprop="name">Hintergrundbild lacus vel augue laoreet rutrum faucibus dolor</h4>
</div>
</a>
</div>
</div>
</div>
<div class="mx-3 mb-5">
<div class="slider-pagination"></div>
</div>
</div>
Bilder als Slider
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.
<div class="sm:flex max-w-screen-xl mx-auto items-center mb-10">
<div class="w-full sm:w-1/2">
<div class="swiper-container-image mx-auto w-full relative">
<div class="slider-wrapper mx-3 relative">
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<img class="rounded-md" width="555" height="322" src="https://source.unsplash.com/random/555x322?sig=1"/>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<img class="rounded-md" width="555" height="322" src="https://source.unsplash.com/random/555x322?sig=2"/>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<img class="rounded-md" width="555" height="322" src="https://source.unsplash.com/random/555x322?sig=3"/>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<img class="rounded-md" width="555" height="322" src="https://source.unsplash.com/random/555x322?sig=4"/>
</div>
</div>
</div>
<div class="mx-8 absolute bottom-0">
<div class="slider-pagination"></div>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 px-3 sm:px-8 py-4">
<h3 class="h3 text-primary no_toc">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
Zitate als Slider
<div class="max-w-screen-xl swiper-container-blockquote mx-auto w-full overflow-visible mb-10">
<div class="mx-3 mb-5 flex justify-end">
<div class="slider-button slider-button-prev rounded-full inline-block m-1">
<div class="inner w-8 h-8 rounded-full bg-white flex items-center justify-center">
<div class="text-primary flex w-full h-full items-center justify-center"><i class="far fa-chevron-left"></i></div>
</div>
</div>
<div class="slider-button slider-button-next rounded-full inline-block m-1">
<div class="inner w-8 h-8 rounded-full bg-white flex items-center justify-center">
<div class="text-primary flex w-full h-full items-center justify-center"><i class="far fa-chevron-right"></i></div>
</div>
</div>
</div>
<div class="slider-wrapper mx-3">
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<figure class="text-center w-3/4 mx-auto">
<blockquote class="blockquote mb-5">Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.</blockquote>
<figcaption class="text-small">Andreas Reuter</figcaption>
</figure>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<figure class="text-center w-3/4 mx-auto">
<blockquote class="blockquote mb-5">Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.</blockquote>
<figcaption class="text-small">Andreas Reuter</figcaption>
</figure>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<figure class="text-center w-3/4 mx-auto">
<blockquote class="blockquote mb-5">Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.</blockquote>
<figcaption class="text-small">Andreas Reuter</figcaption>
</figure>
</div>
</div>
</div>
<div class="mx-3 mb-5">
<div class="slider-pagination justify-center"></div>
</div>
</div>
Bild und Text als Slider
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.
<div class="max-w-screen-xl swiper-container-section mx-auto w-full overflow-visible mb-10">
<div class="mx-3 mb-5 flex justify-end">
<div class="slider-button slider-button-prev rounded-full inline-block m-1">
<div class="inner w-8 h-8 rounded-full bg-white">
<div class="text-primary flex w-full h-full items-center justify-center"><i class="far fa-chevron-left"></i></div>
</div>
</div>
<div class="slider-button slider-button-next rounded-full inline-block m-1">
<div class="inner w-8 h-8 rounded-full bg-white">
<div class="text-primary flex w-full h-full items-center justify-center"><i class="far fa-chevron-right"></i></div>
</div>
</div>
</div>
<div class="slider-wrapper mx-3">
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<div class="sm:flex items-center">
<div class="sm:w-1/2">
<img class="rounded-md box-shadow-default" width="555" height="322" src="https://source.unsplash.com/random/555x322?sig=7"/>
</div>
<div class="sm:w-1/2 sm:px-8 py-4">
<h3 class="h3 text-primary no_toc">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<div class="sm:flex items-center">
<div class="sm:w-1/2">
<img class="rounded-md box-shadow-default" width="555" height="322" src="https://source.unsplash.com/random/555x322?sig=8"/>
</div>
<div class="sm:w-1/2 sm:px-8 py-4">
<h3 class="h3 text-primary no_toc">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
</div>
<div class="slider-item swiper-slide w-auto inline-block">
<div class="slider-item-wrapper mr-6">
<div class="sm:flex items-center">
<div class="sm:w-1/2">
<img class="rounded-md box-shadow-default" width="555" height="322" src="https://source.unsplash.com/random/555x322?sig=9"/>
</div>
<div class="sm:w-1/2 sm:px-8 py-4">
<h3 class="h3 text-primary no_toc">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mx-3 mb-5">
<div class="slider-pagination"></div>
</div>
</div>
Grid
Karten als Grid
<div class="list-grid max-w-screen-xl mx-auto">
<div class="flex flex-wrap list-grid-jobs">
<div class="jobs">
<a class="h-full card image-bg flex flex-col justify-end" href="/">
<img width="1000 1000" height="668 668" src="https://source.unsplash.com/random/500x500?sig=1" class="background-image lazyloaded">
<div class="bg-gradient-light absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps text-shadow-small">Mollis</p>
<h1 class="h5 text-shadow mb-0">Fermentum Adipiscing Pellentesque Tristique</h1>
</div>
</a>
</div>
<div class="jobs">
<a class="h-full card image-bg flex flex-col justify-end" href="/">
<img width="1000 1000" height="668 668" src="https://source.unsplash.com/random/500x500?sig=2" class="background-image lazyloaded">
<div class="bg-gradient-light absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps text-shadow-small">Mollis</p>
<h1 class="h5 text-shadow mb-0">Fermentum Adipiscing Pellentesque Tristique</h1>
</div>
</a>
</div>
<div class="jobs">
<a class="h-full card image-bg flex flex-col justify-end" href="/">
<img width="1000 1000" height="668 668" src="https://source.unsplash.com/random/500x500?sig=3" class="background-image lazyloaded">
<div class="bg-gradient-light absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps text-shadow-small">Mollis</p>
<h1 class="h5 text-shadow mb-0">Fermentum Adipiscing Pellentesque Tristique</h1>
</div>
</a>
</div>
<div class="jobs">
<a class="h-full card image-bg flex flex-col justify-end" href="/">
<img width="1000 1000" height="668 668" src="https://source.unsplash.com/random/500x500?sig=1" class="background-image lazyloaded">
<div class="bg-gradient-light absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps text-shadow-small">Mollis</p>
<h1 class="h5 text-shadow mb-0">Fermentum Adipiscing Pellentesque Tristique</h1>
</div>
</a>
</div>
<div class="jobs">
<a class="h-full card image-bg flex flex-col justify-end" href="/">
<img width="1000 1000" height="668 668" src="https://source.unsplash.com/random/500x500?sig=2" class="background-image lazyloaded">
<div class="bg-gradient-light absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps text-shadow-small">Mollis</p>
<h1 class="h5 text-shadow mb-0">Fermentum Adipiscing Pellentesque Tristique</h1>
</div>
</a>
</div>
<div class="jobs">
<a class="h-full card image-bg flex flex-col justify-end" href="/">
<img width="1000 1000" height="668 668" src="https://source.unsplash.com/random/500x500?sig=3" class="background-image lazyloaded">
<div class="bg-gradient-light absolute inset-0"></div>
<div class="relative text-white card-content space-top">
<p class="caps text-shadow-small">Mollis</p>
<h1 class="h5 text-shadow mb-0">Fermentum Adipiscing Pellentesque Tristique</h1>
</div>
</a>
</div>
</div>
Tabs
Tabs links
<div class="tab-container tabs-left mx-3 py-5">
<ul class="tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="content">
<div id="home" class="tab-content active">
<h3 class="no_toc">HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-content">
<h3 class="no_toc">Menu 1</h3>
<p>Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
<div id="menu2" class="tab-content">
<h3 class="no_toc">Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
<div id="menu3" class="tab-content">
<h3 class="no_toc">Menu 3</h3>
<p>Some content in menu 3.</p>
</div>
</div>
</div>
Tabs oben
<div class="tab-container tabs-top mx-3 py-5">
<ul class="tabs">
<li class="active"><a data-toggle="tab" href="#home2">Home</a></li>
<li><a data-toggle="tab" href="#menu12">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu22">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu32">Menu 3</a></li>
</ul>
<div class="content">
<div id="home2" class="tab-content active">
<h3 class="no_toc">HOME</h3>
<p>Some content.</p>
</div>
<div id="menu12" class="tab-content">
<h3 class="no_toc">Menu 1</h3>
<p>Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
<div id="menu22" class="tab-content">
<h3 class="no_toc">Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
<div id="menu32" class="tab-content">
<h3 class="no_toc">Menu 3</h3>
<p>Some content in menu 3.</p>
</div>
</div>
</div>