Gustavo Benedetto Papi Muñiz Costa gusbemacbe

Details element with custom arrow

A details element with a custom arrow, no javascript

Exploring styling the HTML Details and Summary tags to create functional accordion without any javascript.

	#!/usr/bin/env bash

	# Setting the keyboard layout to English (Macintosh)
	setxkbmap -layout us -variant mac

	# Setting the time zone to São Paulo timr
	sudo timedatectl set-timezone America/Sao_Paulo

	# Updating Arch Linux mirrors
	sudo reflector \

	#!/bin/bash

	_PostInstallCommands() {
	## Add your "late-install" commands here.
	## This is executed as root near the end of calamares execution.

	local -r username="$1" # new user you created for the target

	## Now your commands. Some examples:
	#

	<section>
	<h1>Latest Transactions</h1>
	<h2>Today</h2>
	<details>
	<summary>
	<div>
	<span style="background-color: #f2dcbb;">
	<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
	<rect width="256" height="256" fill="none"></rect>
	<path d="M192,120h27.05573a8,8,0,0,0,7.15542-4.42229l18.40439-36.80878a8,8,0,0,0-3.18631-10.52366L192,40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>


	<div class="tabs">
	<input class="input" name="tabs" type="radio" id="tab-1" checked="checked"/>
	<label class="label" for="tab-1">Arlina Design</label>
	<div class="panel">
	<h1>Arlina Design</h1>
	<p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
	<p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
	</div>
	<input class="input" name="tabs" type="radio" id="tab-2"/>

	<h1>Pure CSS Tabs With Indicator</h1>
	<div class="tabs">

	<input type="radio" id="tab1" name="tab-control" checked>
	<input type="radio" id="tab2" name="tab-control">
	<input type="radio" id="tab3" name="tab-control">
	<input type="radio" id="tab4" name="tab-control">
	<ul>
	<li title="Features"><label for="tab1" role="button"><svg viewBox="0 0 24 24"><path d="M14,2A8,8 0 0,0 6,10A8,8 0 0,0 14,18A8,8 0 0,0 22,10H20C20,13.32 17.32,16 14,16A6,6 0 0,1 8,10A6,6 0 0,1 14,4C14.43,4 14.86,4.05 15.27,4.14L16.88,2.54C15.96,2.18 15,2 14,2M20.59,3.58L14,10.17L11.62,7.79L10.21,9.21L14,13L22,5M4.93,5.82C3.08,7.34 2,9.61 2,12A8,8 0 0,0 10,20C10.64,20 11.27,19.92 11.88,19.77C10.12,19.38 8.5,18.5 7.17,17.29C5.22,16.25 4,14.21 4,12C4,11.7 4.03,11.41 4.07,11.11C4.03,10.74 4,10.37 4,10C4,8.56 4.32,7.13 4.93,5.82Z"/>
	</svg><br><span>Features</span></label></li>

	<body class="bg-gray-50">
	<!-- Section Start -->
	<section class="section pt-28 pb-20" id="home">
	<div class="mx-10">
	<div class="lg:flex justify-center">
	<div class="text-center">
	<div class="text-center">
	<h1 class="text-4xl font-semibold leading-[50px] tracking-wide text-transparent bg-clip-text bg-gradient-to-l from-pink-400 to-blue-600 mb-10">
	45 CSS Only Modern Button Styles
	</h1>