MASTORSCDN INPUT DOCUMENTATION

Welcome to the MastorsCDN Input Component documentation. This guide covers both standard input types and a modern floating input component with a rising placeholder effect. Explore the sections below for previews, class names, and usage examples.

Preview Type/Class Name Description HTML Declaration Copy
Standard Input Types
A collection of styled standard HTML input types with consistent theming and interactive effects.
input[type="text"] Basic text input with border, hover, and focus effects. 

<input type="text" placeholder="Enter text">
input[type="color"] Color picker input with a cursor pointer and consistent height. 

<input type="color" value="#261cb7">
input[type="date"] Date picker input with a minimum width for usability. 

<input type="date">
input[type="range"] Range slider with custom track and thumb styling, including hover and focus effects. 

<input type="range" min="0" max="100" value="50">
input[type="number"] Number input with hidden spin buttons for a clean look. 

<input type="number" value="42" min="0" max="100">
input[type="file"] File upload input with a styled button and hover effect. 

<input type="file">
textarea Resizable textarea with a minimum height and placeholder styling. 

<textarea placeholder="Enter your message"></textarea>
input[type="submit"] Submit button with primary color styling and hover effect. 

<input type="submit" value="Submit">
input[type="search"] Search input with standard styling and focus effect. 

<input type="search" placeholder="Search...">
select Dropdown select with custom arrow and focus animation. 

<select>
    <option value="">Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
Base Floating Input
The core floating input component with a rising placeholder effect.
Enter your text
.input-container.border-all Basic input with 1px border and 6px radius. Placeholder floats up on focus or when filled. 

<div class="input-container border-all">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Original Variations
Additional modifier classes to customize the appearance of the floating input.
Enter your text
.input-container.border-all.shadow Adds a subtle box shadow to the base input. 

<div class="input-container border-all shadow">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Enter your text
.input-container.border-all.rounded.large Increases border radius to 12px and width to 400px. 

<div class="input-container border-all rounded large">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Enhanced Variations
Modern, visually enhanced variations with additional effects and animations.
Enter your text
.input-container.outline Basic input with 2px primary blue border and 8px radius. Features hover animation and glow effect. 

<div class="input-container outline">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Enter your text
.input-container.soft-glow Soft blue glow effect with subtle border and enhanced shadow on hover. 

<div class="input-container soft-glow">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Enter your text
.input-container.pill Pill-shaped input with green border and 50px radius. Includes subtle shadow on hover. 

<div class="input-container pill">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Enter your text
.input-container.underline Minimal underline style with red accent that thickens on hover. 

<div class="input-container underline">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Enter your text
.input-container.floating-box Floating card effect with shadow that deepens on hover. 

<div class="input-container floating-box">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Enter your text
.input-container.neon-edge Eye-catching neon gradient border with blur effect. 

<div class="input-container neon-edge">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>
Enter your text
.input-container.minimal-accent Minimal design with yellow left border and subtle shadow on hover. 

<div class="input-container minimal-accent">
    <input type="text" class="input-field" placeholder=" ">
    <span class="placeholder-text">Enter your text</span>
</div>