This is an example of a contact us form with a date picker and text area, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The font style is imported to the form using its URL. The background of the form is set to red, with the display style given as grid to display the information in a grid layout and the font style is set as Manrope', sans-serif. The form card has the styles of word-wrap as break-word to allow breaking and wrapping long words onto the next line, and the background-color as #fff. The 'Send Message' button as a success type button and given a background color of #ff5300, and a font color of #fff, which turns into the background color of #ff0000, in a hover event. The JavaScript methods have been used to develop the functionality of the date picker. The input text fields take a border color of #ff5300, and a box shadow of 0 0 0 1px RGB(255, 255, 255), in a focus event. Source:https://bbbootstrap.com/snippets/bootstrap-contact-us-form-datepicker-and-text-area-87033260

This is a fun textbox, where the text box is created in a notepad style. HTML markup is simple with a form and a textbox, with 4 rows allowed to enter. The CSS styling created the magic of styling this textbox like a notebook with rows. The form defines the font-size and the color of the paper. The entire textbox is styled with properties like width, overflow, line height and padding which gives a perfect picture of the notebook along with to the background images. Enter the words on each line you will notice that the textbox does not come to an end nor there is any word limit to this text box. Here the background image is repeated using the background-repeat property. This decides how the image will be repeated. Make sure the length of the lines.png matches with the textbox as repeating this image will repeat the red margin on the extreme right.

Texts are usually highlighted for quick reading and bettering understanding of the story or concept. This snippet is one which changes the perspective of the text and highlighted text and still maintains the length of highlighted area over the text. Here position of the is placed behind the . Javascript copies the text entered into the to the which is position behind. The container servers as the anchor to position other elements. The highlight is nested within the brackdrop, the is used to highlight the text inside the highlighted . CSS plays important role as it need to be perfect with the pixels of the highlighted and text area. The styles are fixed as different browsers adds different margins. Javascript keeps the text and the marked area in sync, also helps to scroll them in sync.