This is an example of a UI web form widget for login, designed using CSS, HTML, and Bootstrap framework 4. The style sheet and the font styles have been imported to the code with their URLs. The body of the form is given a background color as #3aada9, and font-family as 'Cabin', sans-serif. The header section of the form is given a background color as #ffc50c. The header image is given a height of 13px and a width of 30px. The form takes a transform effect of translateY(-5px), in a hover event to move the form up by 5px. The header section title is displayed with the styles of font-size as 2em, font color as #fff, and font-weight as 500. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display card fields, in an orderly manner. The icon before the input fields is given a height and a width as 45px. The 'Submit' button is given a background color as #ffc50c, which turns to #D13E2F on hover. Source: https://codepen.io/mehmetmert/pen/LErrpg

This is an example of a profile card widget, designed using CSS, HTML, and Bootstrap framework 4. The font style and user images have been imported to the code with their URLs. The card panel is given a box-shadow style of 0 2px 0 rgba(0,0,0,0.075). The body of the form is given a background color of #ebeef0. The form consists of four profile cards. The first profile card is given a background color of #5fa2dd, a font color of #fff, and two primary and success type buttons. The designation is displayed with a muted text. The second card is given a background color of #91c957, and font color of #fff. The width and size of each profile picture are set as 64px. The font-weight of each card header title is set as 600. The cursor style for all the buttons is set as pointer to get the hand cursor effect on hover. Source: https://www.bootdey.com/snippets/view/profile-cards-widget#css

This is an example of an accordion widget, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The form consists of four accordion items. Each accordion item is given a collapsible effect to hide the non-active sections. The images, font, and Bootstrap styles are imported to the code with their URLs. The body of the form is given a background color of #e6e6e6, whereas the accordion card is given a box-shadow effect of 0 0 6px rgba(0,0,0,0.2). The accordion card header has a background color of #6245dd. The title of each accordion card header is displayed with the styles of font color as #fff, font-size as 1rem, font-weight as 500, and font-family as "Roboto", sans-serif. The accordion image is given a width of 150px. JavaScript methods are used to create the minus icon on the accordion header and its functionality. Source: https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=elegant-accordion-widget